Einfachere Umwandlung von ArrayBuffer in String mit der Codierungs API

Jeff Posnick

Vor über zwei Jahren hat Renato Mangini eine Methode zur Konvertierung zwischen rohen ArrayBuffers und der entsprechenden Stringdarstellung dieser Daten beschrieben. Am Ende des Beitrags erwähnte Renato, dass sich gerade im Entwurfsprozess eine offizielle standardisierte API für die Konvertierung befand. Die Spezifikation wurde ausgereift und sowohl Firefox als auch Google Chrome bieten native Unterstützung für die Schnittstellen TextDecoder und TextEncoder.

Wie in diesem Live-Beispiel, wie unten gezeigt, gezeigt wird, erleichtert die Encoding API die Übersetzung zwischen Rohbyte und nativen JavaScript-Strings, unabhängig davon, mit welcher der vielen Standardcodierungen Sie arbeiten müssen.

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

Im Beispiel oben wird mithilfe der Funktionserkennung ermittelt, ob die erforderliche TextDecoder-Schnittstelle im aktuellen Browser verfügbar ist. Andernfalls wird eine Fehlermeldung angezeigt. In einer echten Anwendung würden Sie normalerweise auf eine alternative Implementierung zurückgreifen, wenn keine native Unterstützung verfügbar ist. Glücklicherweise ist die Bibliothek zur Textcodierung, die Renato in seinem ursprünglichen Artikel erwähnt hat, immer noch eine gute Wahl. Die Bibliothek verwendet native Methoden in Browsern, die sie unterstützen, und bietet Polyfills für die Encoding API in Browsern, die diese Unterstützung noch nicht hinzugefügt haben.

Update, September 2014: Das Beispiel wurde geändert, um zu veranschaulichen, ob die Encoding API im aktuellen Browser verfügbar ist.