Simplification de la conversion de ArrayBuffer en chaîne avec l'API Encodage

Il y a plus de deux ans, Renato Mangini a décrit une méthode permettant de convertir des ArrayBuffers bruts en représentation de chaîne correspondante de ces données. À la fin de son post, Renato a indiqué qu'une API standardisée officielle pour gérer la conversion était en cours d'élaboration. La spécification est désormais mature, et Firefox et Google Chrome ont ajouté la prise en charge native des interfaces TextDecoder et TextEncoder.

Comme le montre cet exemple en direct, extrait ci-dessous, l'API Encoding permet de traduire facilement des octets bruts en chaînes JavaScript natives, quel que soit l'encodage standard que vous devez utiliser.

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

L'exemple ci-dessus utilise la détection de fonctionnalités pour déterminer si l'interface TextDecoder requise est disponible dans le navigateur actuel, et affiche un message d'erreur si ce n'est pas le cas. Dans une application réelle, vous devez normalement utiliser une autre implémentation si la prise en charge native n'est pas disponible. Heureusement, la bibliothèque d'encodage de texte mentionnée par Renato dans son article d'origine reste un bon choix. La bibliothèque utilise les méthodes natives sur les navigateurs qui les prennent en charge et propose des polyfills pour l'API Encoding sur les navigateurs qui ne les prennent pas encore en charge.

Mise à jour de septembre 2014: modification de l'exemple pour illustrer la vérification de la disponibilité de l'API Encoding dans le navigateur actuel.