Codificar y decodificar una cadena a Base64 en JavaScript
El conjunto de caracteres de codificación Base64 consta de A-Z, a-z, 0-9, + y /. En total, hay 64 caracteres en este sistema, por lo que se le conoce como Base64. La codificación Base64 convierte los datos en formato ASCII (Código estándar americano para el intercambio de información).
Por ejemplo, si tiene una cadena Git, en formato de codificación Base64, esta cadena se representará como R29vZ2xl.
Lo que acaba de suceder aquí es que los caracteres individuales de la cadena se representan primero en su valor ASCII, es decir, para G mayúscula, su valor ASCII es 71, para i minúscula, su valor ASCII es 105, y de manera similar para otros personajes también. Para obtener una lista completa de los valores ASCII, visite este enlace.
Luego, estos valores ASCII se convierten en una representación binaria de 8 bits. Esta representación binaria de 8 bits se divide luego en cuatro segmentos de 6 bits. Estos cuatro segmentos binarios luego se convierten en decimales.
Al final, estos números decimales se convertirán en Base64 siguiendo la tabla de codificación de Base64.
Ahora no tenemos que hacer toda esta conversión manualmente. Hasta ahora, lo que hemos visto es solo para fines de comprensión. Veamos cómo codificar y decodificar una cadena en Base64.
Codificar y decodificar una cadena a Base64 en JavaScript
En JavaScript, tenemos dos funciones auxiliares de Base64, btoa() y atob(), para convertir una cadena en codificación Base64 y viceversa. btoa() toma una cadena y la codifica en Base64, y atob() toma una cadena codificada y la decodifica.
En el siguiente código, tenemos dos elementos div dentro de los cuales mostraremos la cadena codificada y decodificada. Estamos almacenando las referencias de estos dos div dentro de myDiv_1 y myDiv_2 usando el método getElementById() en JavaScript. La cadena que codificaremos y decodificaremos en este ejemplo es Git almacenada dentro de la variable str.
Para codificar esta cadena, usaremos la función btoa(). Para ello, simplemente pase la variable str como parámetro a esta función. Almacenaremos el resultado de esto dentro de la variable encodedStr. Luego mostraremos el valor de esta variable dentro de div_1 usando la propiedad myDiv_1.innerHTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="div_1"></div>
<div id="div_2"></div>
<script>
let myDiv_1 = document.getElementById('div_1');
let myDiv_2 = document.getElementById('div_2');
let str = "Git";
let encodedStr = btoa(str);
myDiv_1.innerHTML = encodedStr;
</script>
</body>
</html>
Producción :
R2l0
Esto es lo que obtendrá como resultado. La cadena no se convierte en Base64.
Ahora, para decodificar la cadena anterior en su forma original, puede usar la función atob() y pasar el encodedStr dentro de ella. Luego muestre el valor de la variable decodedStr dentro de div_2 usando la propiedad myDiv_2.innerHTML.
let decodedStr = atob(encodedStr);
myDiv_2.innerHTML = decodedStr;
Producción :
Git
Tenga en cuenta que Base64 se utiliza para enviar datos binarios y no es un método de cifrado. Además, no es un método de compresión.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn