Original article: How to Encode and Decode HTML Base64 using JavaScript – JS Encoding Example
Cuando construyes una aplicación o escribes un programa, podrías necesitar codificar o decodificar con HTML Base64 en JavaScript.
Esto es posible gracias a las dos funciones auxiliares Base64 que son parte de la especificación de HTML y están soportados por todos los navegadores modernos.
En este artículo, aprenderás sobre Base64 y cómo funciona para convertir datos binarios, cadenas regulares, y un montón más sobre texto ASCII.
¿Qué es Base64?
Base64 es un grupo de esquemas de codificación de binario a texto que representa los datos binarios en formato de cadena ASCII. Es usado comúnmente para codificar datos que necesitan ser almacenados o transmitidos de una forma que puede ser representado directamente como texto.
La codificación Base64 funciona al mapear datos binarios a caracteres 64 desde el conjunto de caracteres ASCII. Los caracteres 64 usados en codificación Base64 son: A-Z
, a-z
, 0-9
, +
, y /
.
El proceso de codificación toma 3 bytes de datos binarios y los mapea a 4 caracteres desde el conjunto de arriba, de tal forma que un solo carácter representa cada 6 bits de datos binarios. El resultado es una cadena de caracteres ASCII que puede ser transmitido o almacenado como texto.
La decodificación Base64 es el proceso inverso de codificación. Toma una cadena codificada en Base64 y mapea cada carácter a su representación binario de 6-bits. Los datos binarios resultantes es una reconstrucción de los datos binarios originales codificados a Base64.
Cómo codificar y decodificar HTML Base64 usando JavaScript
Para codificar y decodificar en JavaScript, usarás las funciones btoa()
y atob()
de JavaScript que están disponibles y soportados por los navegadores web.
Estas funciones auxiliares de JavaScript llevan nombres de comandos viejos de Unix para convertir binario a ASCII (btoa) y ASCII a binario (atob).
Puedes codificar una cadena a base64 en JavaScript usando la función btoa()
y decodificar una cadena base64 usando la función atob()
. Por ejemplo, si tienes una cadena almacenada en una variable, como se ve abajo, puedes primero codificarlo a Base64:
let miCadena = "Bienvenido a freeCodeCamp!";
let valorCodificado = btoa(miCadena);
console.log(valorCodificado); // V2VsY29tZSB0byBmcmVlQ29kZUNhbXAh
También puedes decodificar el valorCodificado
de vuelta a su forma original usando la función atob()
. Esta función toma el valor codificado y lo decodifica desde Base64:
let miCadena = "Bienvenido a freeCodeCamp!";
let valorCodificado = btoa(miCadena);
let valorDecodificado = atob(valorCodificado);
console.log(valorDecodificado); // Bienvenido a freeCodeCamp!
Ahora sabes cómo codificar y decodificar Base64 en JavaScript.
Más ejemplos de Codificación en JavaScript
También puedes codificar datos binarios a texto ASCII codificado en Base64 en JavaScript usando la función btoa()
:
let binaryData = new Uint8Array([72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]);
let stringValue = String.fromCharCode.apply(null, binaryData);
console.log(stringValue); // "Hello World"
let encodedValue = btoa(stringValue);
console.log(encodedValue); // SGVsbG8gV29ybGQ=
Arriba, primero convertiste los valores Unicode
a caracteres y luego codificaste la cadena.
También puedes decodificar el texto ASCII codificado en Base64 a datos binarios en JavaScript usando la función atob()
:
let encodedValue = "SGVsbG8gV29ybGQ=";
let binaryData = new Uint8Array(atob(encodedValue).split("").map(function (c) {
return c.charCodeAt(0);
}));
console.log(binaryData); // Uint8Array [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
¡Resumiendo!
En este artículo, has aprendido lo que significa Base64, cómo funciona, y cuándo codificar y decodificar en JavaScript.
Base64 no está destinado a ser el método de encriptación seguro, ni está destinado a ser un método de compresión, porque codificar una cadena a Base64 típicamente resulta en una salida 33% más larga.
La codificación Base64 es usado comúnmente en JavaScript para situaciones como:
- Almacenar y transmitir datos binarios como texto.
- Encriptar datos donde los datos codificados se envían sobre un canal inseguro y decodificado en el otro fin. Sin embargo, no debería ser considerado como un método de encriptación seguro, ya que puede ser fácilmente decodificado.
- La transferencia de datos entre sistemas con conjuntos de caracteres distintos.
- Almacenar datos binarios en una base de datos.
¡Gracias por leer y disfruta programando!
Puedes acceder cerca de 185 artículos míos visitando mi sitio web. También puede usar el campo de búsqueda para ver si he escrito un artículo específico.