Conversione da Arraybuffer a stringa più semplice con l'API Codifica

Più di due anni fa, Renato Mangini ha descritto un metodo per la conversione tra ArrayBuffers non elaborati e la rappresentazione stringa corrispondente di questi dati. Alla fine del post, Renato ha accennato al fatto che era in fase di stesura una bozza di un'API standardizzata ufficiale per gestire la conversione. La specifica è ora matura e sia Firefox che Google Chrome hanno aggiunto il supporto nativo per le interfacce TextDecoder e TextEncoder.

Come dimostrato da questo esempio in tempo reale, estratto di seguito, l'API Encoding semplifica la conversione tra byte non elaborati e stringhe JavaScript native, indipendentemente da quale delle numerose codifiche standard devi utilizzare.

<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'esempio riportato sopra utilizza il rilevamento delle funzionalità per determinare se l'interfaccia TextDecoder richiesta è disponibile nel browser corrente e, in caso contrario, mostra un messaggio di errore. In un'applicazione reale, in genere è preferibile ricorrere a un'implementazione alternativa se il supporto nativo non è disponibile. Fortunatamente, la libreria di codifica del testo menzionata da Renato nel suo articolo originale è ancora una buona scelta. La libreria utilizza i metodi nativi sui browser che li supportano e offre polyfill per l'API Encoding sui browser che non hanno ancora aggiunto il supporto.

Aggiornamento di settembre 2014: è stato modificato l'esempio per mostrare come verificare se l'API Encoding è disponibile nel browser corrente.