字符串和 ArrayBuffer 之间的转换

Question

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

Answer 1

是的：

const encstr = (`TextEncoder` in window) ? new TextEncoder().encode(str) : Uint8Array.from(str, c => c.codePointAt(0));

Answer 2

在使用了 mangini 的从 ArrayBuffer 转换为 String 的解决方案后 - ab2str （这是我发现的最优雅、最有用的解决方案 - 谢谢！） ，我在处理大型数组时遇到了一些问题。更具体地说，调用 String.fromCharCode.apply(null, new Uint16Array(buf)); 会引发错误：

传递给 Function.prototype.apply 的参数数组太大。

为了解决这个问题（绕过），我决定以块的形式处理输入ArrayBuffer。因此修改后的解决方案是：

function ab2str(buf) {
   var str = "";
   var ab = new Uint16Array(buf);
   var abLen = ab.length;
   var CHUNK_SIZE = Math.pow(2, 16);
   var offset, len, subab;
   for (offset = 0; offset < abLen; offset += CHUNK_SIZE) {
      len = Math.min(CHUNK_SIZE, abLen-offset);
      subab = ab.subarray(offset, offset+len);
      str += String.fromCharCode.apply(null, subab);
   }
   return str;
}

块大小设置为 2^16 因为这是我发现在我的开发环境中工作的大小。设置较高的值会导致再次出现相同的错误。可以通过将 CHUNK_SIZE 变量设置为不同的值来更改它。拥有偶数很重要。

关于性能的说明 - 我没有对此解决方案进行任何性能测试。但是，由于它基于以前的解决方案，并且可以处理大型数组，因此我认为没有理由不使用它。

Answer 3

atob() 返回的“本机”二进制字符串是每个字符 1 字节的数组。

所以我们不应该将 2 个字节存储到一个字符中。

var arrayBufferToString = function(buffer) {
  return String.fromCharCode.apply(null, new Uint8Array(buffer));
}

var stringToArrayBuffer = function(str) {
  return (new Uint8Array([].map.call(str,function(x){return x.charCodeAt(0)}))).buffer;
}

Answer 4

ArrayBuffer -> 缓冲区 -> String(Base64)

将 ArrayBuffer 更改为 Buffer，然后更改为 String。

Buffer.from(arrBuffer).toString("base64");

Answer 5

使用 splat 解包而不是循环：

arrbuf = new Uint8Array([104, 101, 108, 108, 111])
text = String.fromCharCode(...arrbuf)
console.log(text)

对于子字符串，可以使用arrbuf.slice()。

Answer 6

我建议不要使用已弃用的 API，例如 BlobBuilder

BlobBuilder 早已被 Blob 对象弃用。将 Dennis 的答案中的代码（其中使用了 BlobBuilder）与下面的代码进行比较：

function arrayBufferGen(str, cb) {

  var b = new Blob([str]);
  var f = new FileReader();

  f.onload = function(e) {
    cb(e.target.result);
  }

  f.readAsArrayBuffer(b);

}

请注意，与已弃用的方法相比，该方法更加干净且不那么臃肿......是的，这绝对是这里需要考虑的事情。

Answer 7

var decoder = new TextDecoder ();
var string = decoder.decode (arrayBuffer);

请参阅 https://developer.mozilla.org/en-US/文档/Web/API/TextDecoder/解码

Answer 8

来自 emscripten：

function stringToUTF8Array(str, outU8Array, outIdx, maxBytesToWrite) {
  if (!(maxBytesToWrite > 0)) return 0;
  var startIdx = outIdx;
  var endIdx = outIdx + maxBytesToWrite - 1;
  for (var i = 0; i < str.length; ++i) {
    var u = str.charCodeAt(i);
    if (u >= 55296 && u <= 57343) {
      var u1 = str.charCodeAt(++i);
      u = 65536 + ((u & 1023) << 10) | u1 & 1023
    }
    if (u <= 127) {
      if (outIdx >= endIdx) break;
      outU8Array[outIdx++] = u
    } else if (u <= 2047) {
      if (outIdx + 1 >= endIdx) break;
      outU8Array[outIdx++] = 192 | u >> 6;
      outU8Array[outIdx++] = 128 | u & 63
    } else if (u <= 65535) {
      if (outIdx + 2 >= endIdx) break;
      outU8Array[outIdx++] = 224 | u >> 12;
      outU8Array[outIdx++] = 128 | u >> 6 & 63;
      outU8Array[outIdx++] = 128 | u & 63
    } else {
      if (outIdx + 3 >= endIdx) break;
      outU8Array[outIdx++] = 240 | u >> 18;
      outU8Array[outIdx++] = 128 | u >> 12 & 63;
      outU8Array[outIdx++] = 128 | u >> 6 & 63;
      outU8Array[outIdx++] = 128 | u & 63
    }
  }
  outU8Array[outIdx] = 0;
  return outIdx - startIdx
}

使用如下：

stringToUTF8Array('abs', new Uint8Array(3), 0, 4);

Answer 9

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

TextEncoder

TextEncoder 表示：

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

自上述内容编写以来更改注释：（同上。）

注意：Firefox、Chrome 和 Opera 曾经支持编码
utf-8 以外的类型（例如 utf-16、iso-8859-2、koi8、cp1261 和
国标）。从 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"));

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

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

对于一般用途，您可以对 localStorage 等内容使用 UTF-16 编码。

TextDecoder

同样，相反的过程 使用 TextDecoder< /a>：

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< /code> 库（许可为 lgpl-3.0），其目标是：

• 基于以下内容为字符串（即字符代码数组 — JavaScript 中的 ArrayBufferView）创建类似 C 的接口
  JavaScript ArrayBuffer 接口
• 创建一个高度可扩展的库，任何人都可以通过向对象 StringView.prototype 添加方法来扩展该库
• 为此类字符串对象创建方法集合（从现在起：stringViews），这些方法严格作用于数字数组
  而不是创建新的不可变 JavaScript 字符串
• 使用 JavaScript 默认 UTF-16 DOMString 以外的 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

Answer 10

尽管 Dennis 和 gengkev 使用 Blob/FileReader 的解决方案有效，但我不建议采用这种方法。这是解决简单问题的异步方法，并且比直接解决方案慢得多。我在 html5rocks 中发表了一篇文章，其中提供了一个更简单且（更快）的解决方案：
http://updates.html5rocks.com/2012/06/如何将 ArrayBuffer 转换为字符串

解决方案是：

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>

Answer 11

您可以使用编码标准TextEncoder和TextDecoder a>，由 stringencoding 库 填充，用于在字符串与 ArrayBuffer 之间进行转换：

var uint8array = new TextEncoder().encode(string);
var string = new TextDecoder(encoding).decode(uint8array);

Answer 12

Blob 比 String.fromCharCode(null,array); 慢得多，

但如果数组缓冲区太大，则会失败。我发现的最佳解决方案是使用 String.fromCharCode(null,array); 并将其拆分为不会破坏堆栈的操作，但一次比单个字符更快。

对于大数组缓冲区的最佳解决方案是：

function arrayBufferToString(buffer){

    var bufView = new Uint16Array(buffer);
    var length = bufView.length;
    var result = '';
    var addition = Math.pow(2,16)-1;

    for(var i = 0;i<length;i+=addition){

        if(i + addition > length){
            addition = length - i;
        }
        result += String.fromCharCode.apply(null, bufView.subarray(i,i+addition));
    }

    return result;

}

我发现这比使用 blob 快大约 20 倍。它也适用于超过 100mb 的大字符串。

Answer 13

如果字符串中有二进制数据（从 nodejs + readFile(..., 'binary') 或 cypress + < 获取code>cy.fixture(..., 'binary') 等），您不能使用 TextEncoder。它仅支持 utf8。值为 >= 128 的字节每个都转换为 2 个字节。

ES2015:

a = Uint8Array.from(s, x => x.charCodeAt(0))

Uint8Array(33) [2, 134, 140, 186, 82, 70, 108, 182, 233, 40, 143, 247, 29, 76, 245, 206, 29, 87, 48, 160, 78, 225 , 242, 56, 236, 201, 80, 80, 152, 118, 92, 144, 48

s = String.fromCharCode.apply(null, a)

"°RFl¶é(÷LõÎW0 Náò8ìÉPPv\0"

Answer 14

根据 gengkev 的答案，我为这两种方式创建了函数，因为 BlobBuilder 可以处理 String 和 ArrayBuffer：

function string2ArrayBuffer(string, callback) {
    var bb = new BlobBuilder();
    bb.append(string);
    var f = new FileReader();
    f.onload = function(e) {
        callback(e.target.result);
    }
    f.readAsArrayBuffer(bb.getBlob());
}

以及

function arrayBuffer2String(buf, callback) {
    var bb = new BlobBuilder();
    bb.append(buf);
    var f = new FileReader();
    f.onload = function(e) {
        callback(e.target.result)
    }
    f.readAsText(bb.getBlob());
}

一个简单的测试：

string2ArrayBuffer("abc",
    function (buf) {
        var uInt8 = new Uint8Array(buf);
        console.log(uInt8); // Returns `Uint8Array { 0=97, 1=98, 2=99}`

        arrayBuffer2String(buf, 
            function (string) {
                console.log(string); // returns "abc"
            }
        )
    }
)

Answer 15

只是

const buffer = thisReturnsBuffers();

const blob = new Blob([buffer], {type: 'text/plain; charset=utf-8'});

blob.text().then(text => console.log(text));

或者

const stringVal = "string here";

const blob = new Blob([stringVal], {type: 'text/plain; charset=utf-8'});

blob.arrayBuffer().then(buffer => console.log(buffer));

为什么你们都让这件事变得如此复杂？

Answer 16

以下所有内容都是关于从数组缓冲区获取二进制字符串，

我建议不要使用

var binaryString = String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));

，因为它

1. 在大缓冲区上崩溃（有人写了关于 246300 的“神奇”大小，但我得到了最大调用堆栈120000 字节缓冲区（Chrome 29）上的大小超出错误）
2. 它的性能非常差（见下文）

如果您确实需要同步解决方案，请使用类似的方法

var
  binaryString = '',
  bytes = new Uint8Array(arrayBuffer),
  length = bytes.length;
for (var i = 0; i < length; i++) {
  binaryString += String.fromCharCode(bytes[i]);
}

，速度很慢前一个但工作正常。在撰写本文时，似乎还没有针对该问题的非常快速的同步解决方案（本主题中提到的所有库都对其同步功能使用相同的方法）。

但我真正推荐的是使用 Blob + FileReader 方法，

function readBinaryStringFromArrayBuffer (arrayBuffer, onSuccess, onFail) {
  var reader = new FileReader();
  reader.onload = function (event) {
    onSuccess(event.target.result);
  };
  reader.onerror = function (event) {
    onFail(event.target.error);
  };
  reader.readAsBinaryString(new Blob([ arrayBuffer ],
    { type: 'application/octet-stream' }));
}

唯一的缺点（并非全部）是它是异步。而且它比以前的解决方案快大约8-10 倍！ （一些细节：我的环境中的同步解决方案对于 2.4Mb 缓冲区需要 950-1050 毫秒，但使用 FileReader 的解决方案对于相同数量的数据大约需要 100-120 毫秒。我已经测试了两种同步解决方案在 100Kb 缓冲区上，它们几乎花费了相同的时间，因此循环并不比使用“apply”慢多少。）

顺便说一句：如何将 ArrayBuffer 与 String 相互转换 作者比较了两种方法像我一样，得到完全相反的结果（他的测试代码在这里）为什么结果如此不同？可能是因为他的测试字符串有 1Kb 长（他称之为“veryLongStr”）。我的缓冲区是一个非常大的 JPEG 图像，大小为 2.4Mb。

Answer 17

（更新请参阅此答案的第二部分，我（希望）提供了一个更完整的解决方案。）

我也遇到了这个问题，以下内容适用于我在 FF 6 中（针对一个方向） )：

var buf = new ArrayBuffer( 10 );
var view = new Uint8Array( buf );
view[ 3 ] = 4;
alert(Array.prototype.slice.call(view).join(""));

当然，不幸的是，您最终得到的是数组中值的 ASCII 文本表示形式，而不是字符。不过，它仍然（应该）比循环更有效。
例如。对于上面的示例，结果是 0004000000，而不是几个空字符 &一个字符（4）。

编辑：

查看MDC此处后，您可以从 Array 创建一个 ArrayBuffer，如下所示：

var arr = new Array(23);
// New Uint8Array() converts the Array elements
//  to Uint8s & creates a new ArrayBuffer
//  to store them in & a corresponding view.
//  To get at the generated ArrayBuffer,
//  you can then access it as below, with the .buffer property
var buf = new Uint8Array( arr ).buffer;

为了回答您原来的问题，这允许您将 ArrayBuffer <-> 转换为 ArrayBuffer 。 String 如下：

var buf, view, str;
buf = new ArrayBuffer( 256 );
view = new Uint8Array( buf );

view[ 0 ] = 7; // Some dummy values
view[ 2 ] = 4;

// ...

// 1. Buffer -> String (as byte array "list")
str = bufferToString(buf);
alert(str); // Alerts "7,0,4,..."

// 1. String (as byte array) -> Buffer    
buf = stringToBuffer(str);
alert(new Uint8Array( buf )[ 2 ]); // Alerts "4"

// Converts any ArrayBuffer to a string
//  (a comma-separated list of ASCII ordinals,
//  NOT a string of characters from the ordinals
//  in the buffer elements)
function bufferToString( buf ) {
    var view = new Uint8Array( buf );
    return Array.prototype.join.call(view, ",");
}
// Converts a comma-separated ASCII ordinal string list
//  back to an ArrayBuffer (see note for bufferToString())
function stringToBuffer( str ) {
    var arr = str.split(",")
      , view = new Uint8Array( arr );
    return view.buffer;
}

为了方便起见，这里有一个函数，用于将原始 Unicode String 转换为 ArrayBuffer（将仅适用于 ASCII/单字节字符）

function rawStringToBuffer( str ) {
    var idx, len = str.length, arr = new Array( len );
    for ( idx = 0 ; idx < len ; ++idx ) {
        arr[ idx ] = str.charCodeAt(idx) & 0xFF;
    }
    // You may create an ArrayBuffer from a standard array (of values) as follows:
    return new Uint8Array( arr ).buffer;
}

// Alerts "97"
alert(new Uint8Array( rawStringToBuffer("abc") )[ 0 ]);

以上允许您从 ArrayBuffer -> 字符串 &再次回到ArrayBuffer，字符串可能存储在例如。 .localStorage :)

希望这有帮助，

丹

Answer 18

与此处的解决方案不同，我需要在 UTF-8 数据之间进行转换。为此，我使用 (un)escape/(en)decodeURIComponent 技巧编写了以下两个函数。它们非常浪费内存，分配了编码 utf8 字符串长度的 9 倍，尽管这些应该由 gc 来恢复。只是不要将它们用于 100mb 的文本。

function utf8AbFromStr(str) {
    var strUtf8 = unescape(encodeURIComponent(str));
    var ab = new Uint8Array(strUtf8.length);
    for (var i = 0; i < strUtf8.length; i++) {
        ab[i] = strUtf8.charCodeAt(i);
    }
    return ab;
}

function strFromUtf8Ab(ab) {
    return decodeURIComponent(escape(String.fromCharCode.apply(null, ab)));
}

检查它是否有效：

strFromUtf8Ab(utf8AbFromStr('latinкирилицаαβγδεζηあいうえお'))
-> "latinкирилицаαβγδεζηあいうえお"

Answer 19

对于 node.js 以及使用 https://github.com/feross/buffer 的浏览器

function ab2str(buf: Uint8Array) {
  return Buffer.from(buf).toString('base64');
}
function str2ab(str: string) {
  return new Uint8Array(Buffer.from(str, 'base64'))
}

注意：解决方案这里不适合我。我需要支持 node.js 和浏览器，并将 UInt8Array 序列化为字符串。我可以将其序列化为数字[]，但这会占用不必要的空间。有了这个解决方案，我不需要担心编码，因为它是 base64。以防万一其他人遇到同样的问题......我的两分钱

Answer 20

我发现这种方法存在问题，基本上是因为我试图将输出写入文件，但它没有正确编码。由于JS似乎使用UCS-2编码（源，source），我们需要进一步扩展这个解决方案，这是我的增强解决方案，适合我。

我对通用文本没有任何困难，但当它是阿拉伯语或韩语时，输出文件没有所有字符，而是显示错误字符

文件输出：
<代码>
","10k 单位":"",关注:"Õ©íüY‹","关注 %{screen_name}":"%{screen_name}U“'Õ©íü",推文:"ä¤üÈ","推文%{hashtag}":"%{hashtag} 'ä¤üÈY´","推文至%{name}":"%{name}U“xä¤üÈY´"},ko:{"%{followers_count} 关注者":"%{followers_count}…X \Ì","100K+":"100Ì tÁ" ,"10k 单位":"Ì è",关注:"\°","关注%{screen_name}":"%{screen_name} Ø \°X0",K:"œ",M:"1Ì",Tweet:"¸","Tweet %{hashtag}":"%{hashtag}

原文：
<代码>
","10k 单位":"万",关注:"fuォローする","关注%{screen_name}":"%{screen_name}さんをfuォロー",推文:"ツイート","推文%{hashtag}": “％{井号}をツイートする","推文至 %{name}":"%{name}さんへツイートする"},ko:{"%{followers_count} 关注者":"%{followers_count}명의 팔로워","100K+": “100分상","10k 单位":"만 단위",关注:"팔로우","关注 %{screen_name}":"%{screen_name} 님 팔로우하기",K:"천",M:"백만",Tweet:"트윗","Tweet %{hashtag}":"%{hashtag}

我从 获取信息丹尼斯的解决方案和这个我发现帖子。

这是我的代码：

function encode_utf8(s) {
  return unescape(encodeURIComponent(s));
}

function decode_utf8(s) {
  return decodeURIComponent(escape(s));
}

 function ab2str(buf) {
   var s = String.fromCharCode.apply(null, new Uint8Array(buf));
   return decode_utf8(decode_utf8(s))
 }

function str2ab(str) {
   var s = encode_utf8(str)
   var buf = new ArrayBuffer(s.length); 
   var bufView = new Uint8Array(buf);
   for (var i=0, strLen=s.length; i<strLen; i++) {
     bufView[i] = s.charCodeAt(i);
   }
   return bufView;
 }

这允许我将内容保存到文件中而不会出现编码问题。

工作原理：
它基本上采用组成 UTF-8 字符的单个 8 字节块并将它们保存为单个字符（因此以这种方式构建的 UTF-8 字符可以由这些字符中的 1-4 个组成）。
UTF-8 以长度从 1 到 4 个字节不等的格式对字符进行编码。我们在这里所做的是将字符串编码到 URI 组件中，然后将该组件转换为相应的 8 字节字符。这样我们就不会丢失长度超过 1 个字节的 UTF8 字符给出的信息。

Answer 21

如果您使用巨大的数组示例arr.length=1000000
您可以使用此代码来避免

function ab2str(buf) {
var bufView = new Uint16Array(buf);
var unis =""
for (var i = 0; i < bufView.length; i++) {
    unis=unis+String.fromCharCode(bufView[i]);
}
return unis
}

反向函数的 堆栈回调问题
来自顶部的mangini答案

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

Answer 22

以下是一个有效的 Typescript 实现：

bufferToString(buffer: ArrayBuffer): string {
    return String.fromCharCode.apply(null, Array.from(new Uint16Array(buffer)));
}

stringToBuffer(value: string): ArrayBuffer {
    let buffer = new ArrayBuffer(value.length * 2); // 2 bytes per char
    let view = new Uint16Array(buffer);
    for (let i = 0, length = value.length; i < length; i++) {
        view[i] = value.charCodeAt(i);
    }
    return buffer;
}

在使用 crypto.subtle 时，我已将其用于许多操作。

Answer 23

嗯，这里有一个有点复杂的方法来做同样的事情：

var string = "Blah blah blah", output;
var bb = new (window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder)();
bb.append(string);
var f = new FileReader();
f.onload = function(e) {
  // do whatever
  output = e.target.result;
}
f.readAsArrayBuffer(bb.getBlob());

编辑： BlobBuilder 早已被弃用，取而代之的是 Blob 构造函数，当我第一次写这篇文章时，Blob 构造函数还不存在。这是更新版本。 （是的，这一直是一种非常愚蠢的转换方式，但它只是为了好玩！）

var string = "Blah blah blah", output;
var f = new FileReader();
f.onload = function(e) {
  // do whatever
  output = e.target.result;
};
f.readAsArrayBuffer(new Blob([string]));

Answer 24

最近，我也需要为我的一个项目执行此操作，因此做了一项深入的研究，并从 Google 开发者社区得到了一个结果，该结果以简单的方式说明了这一点：

For ArrayBuffer to String

function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}
// Here Uint16 can be different like Uinit8/Uint32 depending upon your buffer value type.

For String to ArrayBuffer

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;
}
//Same here also for the Uint16Array.

有关更多详细参考，您可以参考 Google 的此博客。

Answer 25

对我来说这很有效。

  static async hash(message) {
    const data = new TextEncoder().encode(message);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data)
    const hashArray = Array.from(new Uint8Array(hashBuffer))
    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
    return hashHex
  }

Answer 26

  stringToArrayBuffer(byteString) {
    var byteArray = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      byteArray[i] = byteString.codePointAt(i);
    }
    return byteArray;
  }
  arrayBufferToString(buffer) {
    var byteArray = new Uint8Array(buffer);
    var byteString = '';
    for (var i = 0; i < byteArray.byteLength; i++) {
      byteString += String.fromCodePoint(byteArray[i]);
    }
    return byteString;
  }

Answer 27

假设您有一个 arrayBuffer binaryStr:，

let text = String.fromCharCode.apply(null, new Uint8Array(binaryStr));

然后将文本分配给状态。

Answer 28

请参阅此处：https://developer.mozilla.org/en- US/docs/Web/JavaScript/Typed_arrays/StringView
（基于 JavaScript ArrayBuffer 接口的类似 C 的字符串接口）

Answer 29

我用过这个并且为我工作。

function arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}



function base64ToArrayBuffer(base64) {
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}