JavaScript での Base64 エンコーディングとデコーディング

この記事では、JavaScript で Base64 形式の文字列をエンコードおよびデコードする方法を学びます。また、JavaScript で Base64 を使用して Unicode 文字を処理する方法についても説明します。

Base64 は、バイナリデータを ASCII 文字としてエンコードする方法です。ASCII 文字は、A ～ Z、a ～ z、0 ～ 9、+、/ の 64 個の記号で構成されます。 Base64 は、画像の埋め込みやフォームデータの送信など、HTML、JavaScript、CSS と互換性のある方法でバイナリデータを表すためによく使用されます。 Base64 エンコードは、バイナリデータ (画像やファイルなど) を ASCII 文字の文字列に変換するプロセスです。 Base64 デコードは、base64 エンコードの逆のプロセスです。 ASCII 文字の文字列を受け取り、バイナリデータに変換し直します。この記事では、組み込み関数の使用方法を学びます。 btoa() と atob() JavaScript で文字列を Base64 でエンコードおよびデコードします。

1. 使用方法 `btoa()` と `atob()` JavaScriptの関数?

JavaScript には、base64 文字列をエンコードおよびデコードするための 2 つの組み込み関数が用意されています。 btoa() と atob()。 The btoa() 関数は文字列を引数として受け取り、base64 でエンコードされた文字列を返します。文字列は、ASCII や UTF-8 などの 8 ビットで表現できる文字で構成されている必要があります。文字列に UTF-16 などの 8 ビットで表現できない文字が含まれている場合、関数は例外をスローします。

The atob() この関数は、base64 でエンコードされた文字列を引数として受け取り、デコードされた文字列を返します。デコードされた文字列は 8 ビットバイトを表す文字で構成されます。つまり、その値の範囲は次のとおりです。 0 に 255。エンコードされた文字列に空白や句読点など、base64 アルファベットにない文字が含まれている場合、関数は例外をスローします。

これらの関数を JavaScript で使用する方法の例を次に示します。

var str = "Hello World!";

// btoa() で文字列をエンコードします

var encoded = btoa(str);

console.log(encoded); // SGVsbG8gV29ybGQh

// エンコードされた文字列を atob() でデコードします

var decoded = atob(encoded);

console.log(decoded); // こんにちは世界！

2. JavaScript で Base64 を使用して Unicode 文字を処理するにはどうすればよいですか?

前述したように、 btoa() と atob() 関数は、8 ビットで表現できる文字で構成される文字列のみを処理します。ただし、一部の文字列には、絵文字やアクセント付き文字など、エンコードに 8 ビットを超える Unicode 文字が含まれる場合があります。この場合、文字列をバイト配列に変換してから使用する必要があります。 btoa() 関数を使用し、バイト配列を文字列に変換して戻します。 atob() 関数。

この変換を行う 1 つの方法は、 encodeURIComponent() と decodeURIComponent() 機能。これらの関数は、クエリパラメーターやフラグメント識別子などの URI コンポーネントをエンコードおよびデコードするために使用されます。また、パーセントエンコーディングを使用して非 ASCII 文字をエスケープします。パーセントエンコーディングは、各バイトを % とそれに続く 2 つの 16 進数として表します。たとえば、UTF-8 の絵文字 😊 は 4 バイトとしてエンコードされます。 F0 9F 98 8A。パーセントエンコーディングを使用すると、これは次のようになります %F0%9F%98%8A.

これらの関数を使用して、JavaScript で Unicode 文字列を Base64 でエンコードおよびデコードする方法を次に示します。

var str = "Hello 😊";

// encodeURIComponent() で文字列をエンコードします

var encoded = encodeURIComponent(str);

// エンコードされた文字列をログに記録します

console.log(encoded); // こんにちは

// エンコードされた文字列を btoa() でエンコードします

var base64 = btoa(encoded);

// Base64 でエンコードされた文字列をログに記録します

console.log(base64); // SGVsbG8lMjAlRjAlOUYlotglOEE=

// Base64 でエンコードされた文字列を atob() でデコードします

var decoded = atob(base64);

// デコードされた文字列をログに記録します

console.log(decoded); // こんにちは

// デコードされた文字列を decodeURIComponent() でデコードします

var str = decodeURIComponent(decoded);

// 元の文字列をログに記録します

console.log(str); // こんにちは😊

JavaでのBase64エンコーディングとデコーディング

JavaScriptでのBase64エンコーディングとデコーディング

1. 使用方法 btoa() と atob() JavaScriptの関数?

2. JavaScript で Base64 を使用して Unicode 文字を処理するにはどうすればよいですか?

1. 使用方法 `btoa()` と `atob()` JavaScriptの関数?