1. ホーム
  2. ジャバスクリプト

[解決済み】文字列とArrayBufferの間の変換

2022-03-25 22:12:42

質問

JavaScriptの文字列を効率的に変換するための一般的なテクニックはありますか? ArrayBuffers また、その逆も同様ですか?具体的には、ArrayBufferの中身を localStorage と読み返すことができます。

解決方法は?

2016年アップデート - 5年後の現在、文字列と型付き配列を適切なエンコーディングで変換する新しいメソッドが仕様に追加されています (以下のサポートを参照)。

テキストエンコーダー

TextEncoder を表します。 :

TextEncoder インタフェースは、特定のメソッドに対応するエンコーダを表します。 のように、特定の文字エンコーディングであることを示します。 utf-8 , iso-8859-2 , koi8 , cp1261 , gbk , ... エンコーダは、コードポイントのストリームを入力として受けとり バイトのストリームを出力する。

上記を書いた後の変更点メモ (同上)

注:Firefox、Chrome、Operaは、以前はエンコーディングのサポートがありました。 utf-8以外の種類(utf-16、iso-8859-2、koi8、cp1261、および gbk)。Firefox 48 [...]、Chrome 54 [...]、Opera 41の時点では、以下のものはありません。 に合わせるため、utf-8 以外のエンコーディングは使用できません。 仕様です。

*) 更新されたスペック (W3)と こちら (whatwg)です。

のインスタンスを作成した後 TextEncoder は、文字列を受け取り、与えられたエンコーディングパラメータを使ってエンコードします。

if (!("TextEncoder" in window)) 
  alert("Sorry, this browser does not support TextEncoder...");

var enc = new TextEncoder(); // always utf-8
console.log(enc.encode("This is a string converted to a Uint8Array"));

この場合、もちろん .buffer パラメータは、結果的に Uint8Array を使用して、下敷きの ArrayBuffer を、必要に応じて別のビューに変換します。

例えば、この例でUTF-8の範囲外の文字を使用した場合、1バイトではなく2バイトにエンコードされます。

一般的な使用では、次のような場合にUTF-16エンコードを使用します。 localStorage .

テキストデコーダ

同様に、逆の処理 TextDecoder :

TextDecoder インタフェースは、特定のメソッドに対するデコーダを表します。 のように、特定の文字エンコーディングであることを示します。 utf-8 , iso-8859-2 , koi8 , cp1261 , gbk , ... デコーダは、バイトのストリームを入力とし、以下のものを出力します。 コードポイントのストリーム

利用可能なすべてのデコードの種類は、以下のとおりです。 こちら .

if (!("TextDecoder" in window))
  alert("Sorry, this browser does not support TextDecoder...");

var enc = new TextDecoder("utf-8");
var arr = new Uint8Array([84,104,105,115,32,105,115,32,97,32,85,105,110,116,
                          56,65,114,114,97,121,32,99,111,110,118,101,114,116,
                          101,100,32,116,111,32,97,32,115,116,114,105,110,103]);
console.log(enc.decode(arr));

MDN StringView ライブラリ

これらに代わる方法として StringView ライブラリ (ライセンスはlgpl-3.0)であることが目標です。

  • に基づいて、文字列(つまり文字コードの配列、JavaScriptではArrayBufferView)のためのC言語ライクなインターフェースを作成することです。 JavaScript ArrayBuffer インターフェース
  • StringView.prototypeオブジェクトにメソッドを追加することで、誰でも拡張できる拡張性の高いライブラリを作成する。
  • このような文字列のようなオブジェクト (現在は stringViews) のためのメソッドのコレクションを作成し、数値の配列に対して厳密に動作するようにします。 新しいイミュータブルなJavaScript文字列を作成するのではなく
  • JavaScript のデフォルトである UTF-16 DOMStrings 以外の Unicode エンコーディングで動作するようにする。

を使えば、より柔軟に対応できます。しかし、このライブラリのリンクや埋め込みが必要で、その間に TextEncoder / TextDecoder は、モダンブラウザに組み込まれています。

サポート

2018年7月現在

TextEncoder (実験的、標準トラック上)

 Chrome    | Edge      | Firefox   | IE        | Opera     | Safari
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |    19°    |     -     |     25    |     -

 Chrome/A  | Edge/mob  | Firefox/A | Opera/A   |Safari/iOS | Webview/A
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |    19°    |     ?     |     -     |     38

°) 18: Firefox 18 implemented an earlier and slightly different version
of the specification.

WEB WORKER SUPPORT:

Experimental, On Standard Track

 Chrome    | Edge      | Firefox   | IE        | Opera     | Safari
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |     20    |     -     |     25    |     -

 Chrome/A  | Edge/mob  | Firefox/A | Opera/A   |Safari/iOS | Webview/A
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |     20    |     ?     |     -     |     38

Data from MDN - `npm i -g mdncomp` by epistemex