Codifique e decodifique uma string para Base64 em JavaScript

Sahil Bhosale 15 fevereiro 2024

JavaScript JavaScript Encoding

Codifique e decodifique uma string para Base64 em JavaScript

O conjunto de caracteres de codificação Base64 consiste em A-Z, a-z, 0-9, + e /. No total, existem 64 caracteres neste sistema e, portanto, é conhecido como Base64. A codificação Base64 converte os dados no formato ASCII (American Standard Code for Information Interchange).

Por exemplo, se você tiver uma string Git, então no formato de codificação Base64, esta string será representada como R29vZ2xl.

O que aconteceu aqui é que os caracteres individuais da string são primeiro representados em seu valor ASCII, ou seja, para G maiúsculo, seu valor ASCII é 71, para i pequeno, seu valor ASCII é 105, e da mesma forma para outros personagens também. Para obter uma lista completa dos valores ASCII, visite este link.

Em seguida, esses valores ASCII são convertidos em uma representação binária de 8 bits. Essa representação binária de 8 bits é então dividida em quatro segmentos de 6 bits. Esses quatro segmentos binários são então convertidos em decimais.

Codificação JavaScript base64

No final, esses números decimais estão sendo convertidos em Base64 seguindo a tabela de codificação Base64.

Agora não temos que fazer toda essa conversão manualmente. Até agora, o que vimos é apenas para fins de compreensão. Vamos ver como codificar e decodificar uma string em Base64.

Codificando e decodificando uma string para Base64 em JavaScript

Em JavaScript, temos duas funções auxiliares Base64, btoa() e atob(), para converter uma string em codificação Base64 e vice-versa. O btoa() pega uma string e a codifica em Base64, e atob() pega uma string codificada e a decodifica.

No código a seguir, temos dois elementos div dentro dos quais exibiremos a string codificada e decodificada. Estamos armazenando as referências desses dois div dentro de myDiv_1 e myDiv_2 usando o método getElementById() em JavaScript. A string que codificaremos e decodificaremos neste exemplo é Git armazenada dentro da variável str.

Para codificar esta string, usaremos a função btoa(). Para isso, basta passar a variável str como parâmetro para esta função. Vamos armazenar o resultado disso dentro da variável encodedStr. Em seguida, exibiremos o valor desta variável dentro de div_1 usando a propriedade 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>

Produção:

R2l0

Isso é o que você obterá como saída. A string não está sendo convertida em Base64.

Agora, para decodificar a string acima em sua forma original, você pode usar a função atob() e passar encodedStr dentro dela. Em seguida, exiba o valor da variável decodedStr dentro de div_2 usando a propriedade myDiv_2.innerHTML.

let decodedStr = atob(encodedStr);
myDiv_2.innerHTML = decodedStr;

Produção:

Git

Observe que o Base64 é usado para enviar dados binários e não é um método de criptografia. Além disso, não é um método de compactação.

Autor: Sahil Bhosale

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.

Codificando e decodificando uma string para Base64 em JavaScript

Artigo relacionado - JavaScript Encoding