将ArrayBuffer转为String

r囧r小猫 2022-09-09 06:25 420阅读 0赞

## 问题 ##

近期有个项目需要通过小程序配置设备，协议通过蓝牙传输裸的数据流，牵涉到js端将ArrayBuffer组装成String。

## 方法 ##

由于 ArrayBuffer 实际上是一个字节数组，因此这种转换要求两端就如何将 String 中的字符表示为字节达成一致。 您之前可能已经看过这个“协议”：它是字符串的字符编码（通常的“协议条款”是，例如，Unicode UTF-16 和 iso8859-1）。 因此，假设您和对方已就 UTF-16 编码达成一致，则转换代码可能类似于：

> **注意**:Uint16Array的用法。这是一个ArrayBuffer视图，它将数组缓冲区的字节对齐为16位元素。它本身不处理字符编码，字符编码是由String.fromCharCode和str.charCodeAt作为Unicode处理的。

ArrayBuffers 用于传输原始数据，一些新的 API 依赖于它们，包括 [WebSockets][]、[Web Intents][]、[XMLHttpRequest2][] 和 [WebWorkers][]。 然而，由于它们最近才被引入 JavaScript 世界，因此有时会被曲解或误用。

从语义上讲，[ArrayBuffer][] 只是通过特定掩码查看的字节数组。 这个掩码是 [ArrayBufferView][] 的一个实例，定义了字节如何对齐以匹配内容的预期结构。 例如，如果您知道 ArrayBuffer 中的字节表示一个 16 位无符号整数数组，您只需将 ArrayBuffer 包装在 `Uint16Array` 视图中，您就可以使用方括号语法操作其元素，就好像 `Uint16Array` 是一个整数数组一样：

// suppose buf contains the bytes [0x02, 0x01, 0x03, 0x07]
    // notice the multibyte values respect the hardware endianess, which is little-endian in x86
    var bufView = new Uint16Array(buf);
    if (bufView[0]===258) {    // 258 === 0x0102
      console.log("ok");
    }
    bufView[0] = 255;    // buf now contains the bytes [0xFF, 0x00, 0x03, 0x07]
    bufView[0] = 0xff05; // buf now contains the bytes [0x05, 0xFF, 0x03, 0x07]
    bufView[1] = 0x0210; // buf now contains the bytes [0x05, 0xFF, 0x10, 0x02]

### 使用TextEncoder或TextDecoder ###

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

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

## 参考文章 ##

1.  [How to convert ArrayBuffer to and from String][]
2.  [Converting between strings and ArrayBuffers][]

[WebSockets]: https://www.html5rocks.com/en/tutorials/websockets/basics/
[Web Intents]: https://www.w3.org/TR/web-intents/
[XMLHttpRequest2]: https://www.html5rocks.com/en/tutorials/file/xhr2/
[WebWorkers]: https://www.html5rocks.com/en/tutorials/workers/basics/#toc-gettingstarted-workercomm
[ArrayBuffer]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
[ArrayBufferView]: https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView
[How to convert ArrayBuffer to and from String]: https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
[Converting between strings and ArrayBuffers]: https://stackoverflow.com/questions/6965107/converting-between-strings-and-arraybuffers