JavaScriptでBase64を使用して文字列をエンコードおよびデコードする方法
序章
JavaScriptでは、Base64を使用して文字列をエンコードおよびデコードすることができます。
この記事では、 btoa
と atob
最新のWebブラウザで使用できるJavaScript関数。
前提条件
この記事をフォローするには、次のものが必要です。
- JavaScriptの文字列の理解。 詳細については、JavaScriptで文字列を操作する方法を参照してください。
- WindowまたはWorkerGlobalScopeで使用可能な関数の使用に関する理解。
- 開発者コンソールの理解。 詳細については、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);
このコードの出力は、文字と数字を含む文字列です。
- OutputSGVsbG8gV29ybGQh
atob()
文字列を受け取り、Base64からデコードします。
以前からエンコードされた文字列を取得しましょう、 'SGVsbG8gV29ybGQh'
、Base64からデコードします。 ブラウザのWeb開発者コンソールで、文字列を定義してデコードし、デコードされた文字列を表示します。
// Define the string
var encodedStringAtoB = 'SGVsbG8gV29ybGQh';
// Decode the String
var decodedStringAtoB = atob(encodedStringAtoB);
console.log(decodedStringAtoB);
このコードの出力は、文字列が元のメッセージに変換されたことを示しています。
- OutputHello World!
これで、Base64をエンコードおよびデコードするための2つのツールができました。
Base64の一般的なユースケースの調査
Base64を使用して、HTML、JavaScript、およびCSSと互換性のある方法でバイナリデータを表すこともできます。 たとえば、Base64を使用してCSSまたはJavaScriptファイルに画像をインラインで埋め込むことができます。
Base64を使用して、フォームデータやJSONなどの入力を、URLセーフな文字セットが削減された文字列に変換することができます。 ただし、特定のサーバーがプラス(+
)およびスラッシュ(/
)文字の場合は、代わりにencodeURIComponentを使用することをお勧めします。
Base64の制限を理解する
Base64は、安全な暗号化方式を意味するものではありません。
Base64も圧縮方式ではありません。 文字列をBase64にエンコードすると、通常33% longerの出力になります。
結論
この記事では、 btoa
と atob
Base64文字列をエンコードおよびデコードします。
JavaScriptについて詳しく知りたい場合は、JavaScriptトピックページで演習とプログラミングプロジェクトを確認してください。