JavaScript で文字列を Base64にエンコードおよびデコードする

Base64エンコーディング文字セットは、A-Za-z0-9+、および/で構成されます。このシステムには合計 64文字あるため、Base64と呼ばれます。Base64エンコーディングは、データを ASCII(情報交換のためのアメリカ標準コード)形式に変換します。

たとえば、文字列 Git がある場合、Base64エンコード形式では、この文字列は R29vZ2xl として表されます。

ここで起こったことは、文字列の個々の文字が最初に ASCII 値に表されることです。つまり、大文字の G の場合、ASCII 値は 71、小さい i の場合、ASCII 値は 105です。他のキャラクターも同様です。ASCII 値の完全なリストを取得するには、このリンクにアクセスしてください。

次に、これらの ASCII 値は 8ビットのバイナリ表現に変換されます。この 8ビットのバイナリ表現は、4つの 6ビットセグメントに分割されます。次に、これらの 4つのバイナリセグメントが 10進数に変換されます。

JavaScriptbase64エンコーディング

最終的に、これらの 10進数はBase64エンコーディングテーブルに従って Base64に変換されます。

これで、この変換をすべて手動で行う必要はありません。今まで、私たちが見たのは、理解を目的としたものだけです。文字列を Base64にエンコードおよびデコードする方法を見てみましょう。

JavaScript での文字列の Base64へのエンコードとデコード

JavaScript には、文字列を Base64エンコーディングに、またはその逆に変換するための 2つの Base64ヘルパー関数 btoa()atob() があります。btoa()は文字列を取得して Base64にエンコードし、atob()はエンコードされた文字列を取得してデコードします。

以下のコードでは、2つの div 要素があり、その中にエンコードおよびデコードされた文字列が表示されます。JavaScript の getElementById() メソッドを使用して、これら 2つの div の参照を myDiv_1myDiv_2内に保存しています。この例でエンコードおよびデコードする文字列は、str 変数内に格納されている Git です。

この文字列をエンコードするには、btoa()関数を使用します。このためには、str 変数をパラメーターとしてこの関数に渡すだけです。この結果を encodedStr 変数内に保存します。次に、myDiv_1.innerHTML プロパティを使用して、div_1内にこの変数の値を表示します。

<!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>

出力:

R2l0

これは、出力として取得されるものです。文字列は Base64に変換されていません。

上記の文字列を元の形式にデコードするには、atob()関数を使用して、その中に encodedStr を渡すことができます。次に、myDiv_2.innerHTML プロパティを使用して、div_2内の decodedStr 変数の値を表示します。

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

出力:

Git

Base64はバイナリデータの送信に使用され、暗号化方式ではないことに注意してください。また、圧縮方式ではありません。

関連記事 - JavaScript Encoding

  • JavaScript での URL エンコード