序章

JavaScriptでは、Base64を使用して文字列をエンコードおよびデコードすることができます。

この記事では、 btoaatob 最新のWebブラウザで使用できるJavaScript関数。

前提条件

この記事をフォローするには、次のものが必要です。

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

btoa() atob()は、HTML仕様のコア部分であり、すべての最新ブラウザーで使用できる2つのBase64ヘルパー関数です。

注:これらの関数の名前は、バイナリをASCII(btoa)に、ASCIIをバイナリ(atob)に変換するための古いUnixコマンドを参照しています。 ただし、「これらの関数の入力と出力はどちらもUnicode文字列です」。

btoa() 文字列を受け取り、Base64にエンコードします。

あなたが文字列を持っているとしましょう、 "Hello World!"、およびBase64にエンコードしたい。 ブラウザのWeb開発者コンソールで、文字列を定義してエンコードし、エンコードされた文字列を表示します。

// Define the string
var decodedStringBtoA = 'Hello World!';

// Encode the String
var encodedStringBtoA = btoa(decodedStringBtoA);

console.log(encodedStringBtoA);

このコードの出力は、文字と数字を含む文字列です。

  1. Output
    SGVsbG8gV29ybGQh

atob() 文字列を受け取り、Base64からデコードします。

以前からエンコードされた文字列を取得しましょう、 'SGVsbG8gV29ybGQh'、Base64からデコードします。 ブラウザのWeb開発者コンソールで、文字列を定義してデコードし、デコードされた文字列を表示します。

// Define the string
var encodedStringAtoB = 'SGVsbG8gV29ybGQh';

// Decode the String
var decodedStringAtoB = atob(encodedStringAtoB);

console.log(decodedStringAtoB);

このコードの出力は、文字列が元のメッセージに変換されたことを示しています。

  1. Output
    Hello World!

これで、Base64をエンコードおよびデコードするための2つのツールができました。

Base64の一般的なユースケースの調査

Base64を使用して、HTML、JavaScript、およびCSSと互換性のある方法でバイナリデータを表すこともできます。 たとえば、Base64を使用してCSSまたはJavaScriptファイルに画像をインラインで埋め込むことができます。

Base64を使用して、フォームデータやJSONなどの入力を、URLセーフな文字セットが削減された文字列に変換することができます。 ただし、特定のサーバーがプラス(+)およびスラッシュ(/)文字の場合は、代わりにencodeURIComponentを使用することをお勧めします。

Base64の制限を理解する

Base64は、安全な暗号化方式を意味するものではありません。

Base64も圧縮方式ではありません。 文字列をBase64にエンコードすると、通常33% longerの出力になります。

結論

この記事では、 btoaatob Base64文字列をエンコードおよびデコードします。

注: 使用できますかは、 UTF-8 の処理に関する既知の問題を文書化し、古いブラウザーにポリフィルを提供します。

JavaScriptについて詳しく知りたい場合は、JavaScriptトピックページで演習とプログラミングプロジェクトを確認してください。