Gemakkelijkere conversie van ArrayBuffer naar String met de Encoding API

Jeff Posnick

Ruim twee jaar geleden beschreef Renato Mangini een methode voor het converteren tussen onbewerkte ArrayBuffers en de bijbehorende stringrepresentatie van die gegevens. Aan het einde van het bericht zei Renato dat er een officiële gestandaardiseerde API voor de conversie in voorbereiding was. De specificatie is nu volwassener geworden en zowel Firefox als Google Chrome hebben native ondersteuning toegevoegd voor de TextDecoder- en TextEncoder- interfaces.

Zoals blijkt uit dit live voorbeeld , dat hieronder wordt weergegeven, maakt de Encoding API het eenvoudig om te vertalen tussen onbewerkte bytes en native JavaScript-tekenreeksen, ongeacht met welke van de vele standaardcoderingen u moet werken.

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

In het bovenstaande voorbeeld wordt functiedetectie gebruikt om te bepalen of de vereiste TextDecoder interface beschikbaar is in de huidige browser, en wordt er een foutmelding weergegeven als dit niet het geval is. In een echte applicatie wil je normaal gesproken terugvallen op een alternatieve implementatie als er geen native ondersteuning beschikbaar is. Gelukkig is de tekstcoderingsbibliotheek die Renato in zijn oorspronkelijke artikel noemde nog steeds een goede keuze. De bibliotheek gebruikt de eigen methoden in browsers die deze ondersteunen, en biedt polyfills voor de Encoding API in browsers waarvoor nog geen ondersteuning is toegevoegd.

Update, september 2014 : het voorbeeld aangepast om te illustreren of de coderings-API beschikbaar is in de huidige browser.