在字符串和ArrayBuffers之间转换

2020/10/08 04:21 · javascript ·  · 0评论

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

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

TextEncoder

TextEncoder代表

TextEncoder接口表示为具体的方法的编码器,这是一个特定的字符编码,如utf-8iso-8859-2koi8
cp1261gbk,...
编码器将代码点流作为输入并发出字节流。

由于上述内容而编写的变更说明:(同上)

注意: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范围以外的字符,它们将被编码为两个字节,而不是一个字节。

对于一般用途,您可以将UTF-16编码用于localStorage

文字解码器

同样,相反的过程使用TextDecoder

TextDecoder接口表示为具体的方法,即一个特定的字符编码,如解码器utf-8iso-8859-2koi8
cp1261gbk,...的解码器需要一个字节流作为输入,并且发射的码点流。

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

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接口为字符串(即,字符代码数组— JavaScript中的ArrayBufferView)创建类似C的接口
  • 创建一个高度可扩展的库,任何人都可以通过向对象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

尽管使用Blob / FileReader的Dennis和gengkev解决方案可以工作,但我不建议您采用这种方法。它是解决一个简单问题的异步方法,并且比直接解决方案要慢得多。我在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可以帮助解决这个字符串转换问题。Html5Rocks.com查看Jeff Posnik对上述原始文章的回复

摘抄:

无论您需要使用多种标准编码中的哪种,Encoding 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);
    });
  } 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>

您可以使用stringencoding库中填充Encoding标准TextEncoderEncoding标准来将字符串与ArrayBuffers相互转换:TextDecoder

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

Blob比 String.fromCharCode(null,array);

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

大型数组缓冲区的最佳解决方案是:

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的大型字符串。

基于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"
            }
        )
    }
)

以下所有关于从数组缓冲区获取二进制字符串的信息

我建议不要使用

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

因为它

  1. 在大缓冲区上崩溃(有人写了“ 246300”的“魔术”大小,但Maximum call stack size exceeded在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。

更新,请参阅此答案的第二部分,在那儿,我(希望)提供了更完整的解决方案。)

我也遇到了这个问题,以下内容在FF 6中为我工作(针对一个方向):

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

不幸的是,当然,您最终得到的是数组中值的ASCII文本表示形式,而不是字符。但是,它(应该)比循环要有效得多。例如。对于上面的示例,结果为0004000000,而不是几个null字符和一个chr(4)。

编辑:

看后MDC 在这里,你可以创建一个ArrayBufferArray如下:

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

为方便起见,这是一个function将原始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-> StringArrayBuffer再次返回,其中字符串可以存储在例如。.localStorage:)

希望这可以帮助,

与这里的解决方案不同,我需要与UTF-8数据进行相互转换。为此,我使用(un)escape /(en)decodeURIComponent技巧对以下两个函数进行了编码。它们非常浪费内存,分配了9倍于编码的utf8字符串的长度,尽管这些应该由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кирилицаαβγδεζηあいうえお"

如果字符串中包含二进制数据(从nodejs+readFile(..., 'binary')cypress+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õÎW0Náò8ìÉPPv\ 0”

我发现我在使用此方法时遇到了问题,基本上是因为我试图将输出写入文件中并且未正确编码。由于JS似乎使用UCS-2编码(sourcesource),因此我们需要进一步扩展此解决方案,这是我可以使用的增强型解决方案。

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

文件输出:

","10k unit":"",Follow:"Õ©íüY‹","Follow %{screen_name}":"%{screen_name}U“’Õ©íü",Tweet:"ĤüÈ","Tweet %{hashtag}":"%{hashtag} ’ĤüÈY‹","Tweet to %{name}":"%{name}U“xĤüÈY‹"},ko:{"%{followers_count} followers":"%{followers_count}…X \Ì","100K+":"100Ì tÁ","10k unit":"Ì è",Follow:"\°","Follow %{screen_name}":"%{screen_name} Ø \°X0",K:"œ",M:"1Ì",Tweet:"¸","Tweet %{hashtag}":"%{hashtag}

原版的:

","10k unit":"万",Follow:"フォローする","Follow %{screen_name}":"%{screen_name}さんをフォロー",Tweet:"ツイート","Tweet %{hashtag}":"%{hashtag} をツイートする","Tweet to %{name}":"%{name}さんへツイートする"},ko:{"%{followers_count} followers":"%{followers_count}명의 팔로워","100K+":"100만 이상","10k unit":"만 단위",Follow:"팔로우","Follow %{screen_name}":"%{screen_name} 님 팔로우하기",K:"천",M:"백만",Tweet:"트윗","Tweet %{hashtag}":"%{hashtag}

我从dennis的解决方案中获取了信息,并且发现了这篇文章

这是我的代码:

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字符所提供的信息。

如果您使用了巨大的数组示例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;
}

好吧,这是做同样事情的一种令人费解的方法:

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构造函数所取代,而当我第一次写这篇文章时,它是不存在的。这是更新版本。(是的,这一直是进行转换的非常愚蠢的方法,但这只是为了好玩!)

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

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

arguments array passed to Function.prototype.apply is too large

为了解决(旁路)问题,我决定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变量设置为其他值来更改它重要的是要有偶数。

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

参见此处:https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays/StringView
(类似于C的接口,用于基于JavaScript ArrayBuffer接口的字符串)

对于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,所以我不必担心编码。万一其他人也遇到同样的问题...我的两分钱

假设您有一个arrayBuffer binaryStr:

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

然后将文本分配给状态。

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

是:

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

我建议不要使用不推荐使用的API,例如BlobBuilder

Blob对象早已不推荐使用BlobBuilder。将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);

}

请注意,与不推荐使用的方法相比,此方法更清洁,更不膨胀。是的,这绝对是这里要考虑的问题。

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

参见https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/decode

我用这个为我工作。

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

以下是有效的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时,我已将其用于许多操作

本文地址:http://javascript.askforanswer.com/zaizifuchuanhearraybufferszhijianzhuanhuan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!