Cómo codificar y decodificar HTML Base64 usando JavaScript: Ejemplo de codificación en JS

Artículo original: 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.