在字符串和 ArrayBuffers 之间转换 [英] Converting between strings and ArrayBuffers

问题描述

是否有一种普遍接受的技术可以将 JavaScript 字符串高效地转换为 ArrayBuffers，反之亦然?具体来说，我希望能够将 ArrayBuffer 的内容写入 localStorage 并将其读回.

Is there a commonly accepted technique for efficiently converting JavaScript strings to ArrayBuffers and vice-versa? Specifically, I'd like to be able to write the contents of an ArrayBuffer to localStorage and to read it back.

推荐答案

2016 年更新 - 五年后，规范中出现了新方法(请参阅下面的支持)以在字符串和类型化数组之间进行转换使用正确的编码.

Update 2016 - five years on there are now new methods in the specs (see support below) to convert between strings and typed arrays using proper encoding.

TextEncoder 代表:

TextEncoder 接口代表特定方法的编码器，这是一种特定的字符编码，例如 utf-8、iso-8859-2、koi8，cp1261, gbk, ... 编码器将代码点流作为输入并发出字节流.

The TextEncoder interface represents an encoder for a specific method, that is a specific character encoding, like utf-8, iso-8859-2, koi8, cp1261, gbk, ... An encoder takes a stream of code points as input and emits a stream of bytes.

自写上述内容以来的更改说明:(同上)

注意:Firefox、Chrome 和 Opera 曾经支持编码utf-8 以外的类型(例如 utf-16、iso-8859-2、koi8、cp1261 和国标).从 Firefox 48 [...]、Chrome 54 [...] 和 Opera 41 开始，没有除了 utf-8 之外的其他编码类型也可用，以便匹配规范*

Note: Firefox, Chrome and Opera used to have support for encoding types other than utf-8 (such as utf-16, iso-8859-2, koi8, cp1261, and gbk). As of Firefox 48 [...], Chrome 54 [...] and Opera 41, no other encoding types are available other than utf-8, in order to match the spec.*

*) 更新规范 (W3) 和 这里(whatwg).

*) Updated specs (W3) and here (whatwg).

在创建 TextEncoder 的实例后，它将获取一个字符串并使用给定的编码参数对其进行编码:

After creating an instance of the TextEncoder it will take a string and encode it using a given encoding parameter:

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"));

当然，如果需要，您当然可以使用结果 Uint8Array 上的 .buffer 参数将底层 ArrayBuffer 转换为不同的视图.

You then of course use the .buffer parameter on the resulting Uint8Array to convert the underlaying ArrayBuffer to a different view if needed.

只要确保字符串中的字符符合编码模式，例如，如果您在示例中使用 UTF-8 范围之外的字符，它们将被编码为两个字节而不是一个.

Just make sure that the characters in the string adhere to the encoding schema, for example, if you use characters outside the UTF-8 range in the example they will be encoded to two bytes instead of one.

对于一般用途，您可以对 localStorage 之类的内容使用 UTF-16 编码.

For general use you would use UTF-16 encoding for things like localStorage.

同样，相反的过程使用TextDecoder:

Likewise, the opposite process uses the TextDecoder:

TextDecoder 接口代表特定方法的解码器，这是一种特定的字符编码，例如 utf-8、iso-8859-2、koi8，cp1261, gbk, ... 解码器将字节流作为输入并发出代码点流.

The TextDecoder interface represents a decoder for a specific method, that is a specific character encoding, like utf-8, iso-8859-2, koi8, cp1261, gbk, ... A decoder takes a stream of bytes as input and emits a stream of code points.

可以在此处找到所有可用的解码类型.

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));

另一种方法是使用 StringView库(许可为lgpl-3.0)其目标是:

An alternative to these is to use the StringView library (licensed as lgpl-3.0) which goal is:

• 根据JavaScript ArrayBuffer 接口
• 创建一个高度可扩展的库，任何人都可以通过向对象 StringView.prototype 添加方法来扩展该库
• 为这种类似字符串的对象创建一组方法(从现在开始:stringViews)，这些对象严格作用于数字数组而不是创建新的不可变 JavaScript 字符串
• 使用 Unicode 编码而不是 JavaScript 的默认 UTF-16 DOMStrings

提供更大的灵活性.然而，当 TextEncoder/TextDecoder 被内置在现代浏览器中时，它需要我们链接或嵌入这个库.

giving much more flexibility. However, it would require us to link to or embed this library while TextEncoder/TextDecoder is being built-in in modern browsers.

截至 2018 年 7 月:

As of July/2018:

TextEncoder(实验性，在标准轨道上)

TextEncoder (Experimental, On Standard Track)

 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

这篇关于在字符串和 ArrayBuffers 之间转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！