在字符串和数组缓冲区之间转换支持

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


答案 1

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

文本编码器

文本编码器表示

该接口表示特定方法的编码器,即特定字符编码,例如,iso-8859-2koi8cp1261gbk,...编码器将码位流作为输入,并发出字节流。TextEncoderutf-8

自上文以来的更改说明:(同上)

注意: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"));

然后,如果需要,您当然可以使用结果上的参数将下铺转换为其他视图。.bufferUint8ArrayArrayBuffer

只需确保字符串中的字符符合编码架构,例如,如果在示例中使用 UTF-8 范围之外的字符,它们将被编码为两个字节而不是一个字节。

对于一般用途,您将对诸如 之类的内容使用 UTF-16 编码。localStorage

文本解码器

同样,相反的过程使用文本解码器

该接口表示特定方法的解码器,即特定字符编码,如、、、、、...解码器将字节流作为输入,并发出码位流。TextDecoderutf-8iso-8859-2koi8cp1261gbk

所有可用的解码类型都可以在这里找到。

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 ArrayBuffer接口为字符串创建一个类似C的接口(即字符代码数组 - JavaScript中的ArrayBufferView)
  • 创建一个高度可扩展的库,任何人都可以通过将方法添加到对象 StringView.prototype 来扩展该库
  • 为这种类似字符串的对象(从现在开始:stringViews)创建一个方法集合,这些对象严格处理数字数组,而不是创建新的不可变的JavaScript字符串
  • 使用 JavaScript 的默认 UTF-16 DOMStrings 以外的 Unicode 编码

提供更大的灵活性。但是,它需要我们在现代浏览器中内置/时链接到或嵌入此库。TextEncoderTextDecoder

支持

截至2018年7月:

文本编码器(实验性,在标准轨道上)

 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

答案 2

虽然Dennis和engkev使用Blob / FileReader的解决方案有效,但我不建议采用这种方法。它是解决简单问题的异步方法,比直接解决方案慢得多。我在html5rocks中用一个更简单,(更快)的解决方案写了一篇文章:http://updates.html5rocks.com/2012/06/How-to-convert-ArrayBuffer-to-and-from-String

解决方案是:

function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}

function str2ab(str) {
  var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
  var bufView = new Uint16Array(buf);
  for (var i=0, strLen=str.length; i<strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

编辑:

编码 API 有助于解决字符串转换问题。查看Jeff Posnik对上述原始文章 Html5Rocks.com 的回应。

摘录:

编码 API 使得在原始字节和本机 JavaScript 字符串之间进行转换变得简单,无论您需要使用哪种标准编码。

<pre id="results"></pre>

<script>
  if ('TextDecoder' in window) {
    // The local files to be fetched, mapped to the encoding that they're using.
    var filesToEncoding = {
      'utf8.bin': 'utf-8',
      'utf16le.bin': 'utf-16le',
      'macintosh.bin': 'macintosh'
    };

    Object.keys(filesToEncoding).forEach(function(file) {
      fetchAndDecode(file, filesToEncoding[file]);
    });
  } else {
    document.querySelector('#results').textContent = 'Your browser does not support the Encoding API.'
  }

  // Use XHR to fetch `file` and interpret its contents as being encoded with `encoding`.
  function fetchAndDecode(file, encoding) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', file);
    // Using 'arraybuffer' as the responseType ensures that the raw data is returned,
    // rather than letting XMLHttpRequest decode the data first.
    xhr.responseType = 'arraybuffer';
    xhr.onload = function() {
      if (this.status == 200) {
        // The decode() method takes a DataView as a parameter, which is a wrapper on top of the ArrayBuffer.
        var dataView = new DataView(this.response);
        // The TextDecoder interface is documented at http://encoding.spec.whatwg.org/#interface-textdecoder
        var decoder = new TextDecoder(encoding);
        var decodedString = decoder.decode(dataView);
        // Add the decoded file's text to the <pre> element on the page.
        document.querySelector('#results').textContent += decodedString + '\n';
      } else {
        console.error('Error while requesting', file, this);
      }
    };
    xhr.send();
  }
</script>