Conversión entre cadenas y ArrayBuffers

¿Existe una técnica comúnmente aceptada para convertir de manera eficiente cadenas de JavaScript a ArrayBuffers y viceversa? Específicamente, me gustaría poder escribir el contenido de un ArrayBuffer localStoragey luego volver a leerlo.

Aug 06 '11 13:08 kpozin

Aunque las soluciones de Dennis y gengkev para usar Blob/FileReader funcionan, no sugeriría adoptar ese enfoque. Es un enfoque asíncrono para un problema simple y es mucho más lento que una solución directa. Hice una publicación en html5rocks con una solución más simple y (mucho más rápida): http://updates.html5rocks.com/2012/06/How-to-convert-ArrayBuffer-to-and-from-String

Y la solución es:

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

EDITAR:

La API de codificación ayuda a resolver el problema de conversión de cadenas. Consulte la respuesta de Jeff Posnik en Html5Rocks.com al artículo original anterior.

Extracto:

La API de codificación simplifica la traducción entre bytes sin formato y cadenas de JavaScript nativas, independientemente de con cuál de las muchas codificaciones estándar necesite trabajar.

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

Jun 15 '2012 22:06 mangini

Puede utilizar TextEncodery TextDecoderdesde el estándar de codificación , que se completa mediante la biblioteca stringencoding , para convertir cadenas hacia y desde ArrayBuffers:

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

Jul 10 '2012 10:07 Ilmari Heikkinen

Blob es mucho más lento queString.fromCharCode(null,array);

pero eso falla si el búfer de la matriz se vuelve demasiado grande. La mejor solución que he encontrado es usarla String.fromCharCode(null,array);y dividirla en operaciones que no acaben con la pila, pero que sean más rápidas que un solo carácter a la vez.

La mejor solución para un búfer de matriz grande es:

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;

}

Descubrí que esto es aproximadamente 20 veces más rápido que usar blob. También funciona para cadenas grandes de más de 100 MB.

Dec 16 '2013 06:12 Ryan Weinstein