Konversi ArrayBuffer ke String yang lebih mudah dengan Encoding API

Jeff Posnick

Lebih dari dua tahun yang lalu, Renato Mangini menjelaskan metode untuk mengonversi antara ArrayBuffers mentah dan representasi string yang sesuai dari data tersebut. Di akhir postingan, Renato menyebutkan bahwa API standar resmi untuk menangani konversi sedang dalam proses penyusunan draf. Spesifikasi kini telah matang, dan Firefox serta Google Chrome telah menambahkan dukungan native untuk antarmuka TextDecoder dan TextEncoder.

Seperti yang ditunjukkan oleh contoh live ini, yang dikutip di bawah, Encoding API memudahkan terjemahan antara byte mentah dan string JavaScript native, terlepas dari encoding standar mana yang perlu Anda gunakan.

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

Contoh di atas menggunakan deteksi fitur untuk menentukan apakah antarmuka TextDecoder yang diperlukan tersedia di browser saat ini, dan menampilkan pesan error jika tidak. Dalam aplikasi yang sebenarnya, Anda biasanya ingin kembali ke penerapan alternatif jika dukungan native tidak tersedia. Untungnya, library encoding teks yang disebutkan Renato dalam artikel aslinya masih merupakan pilihan yang baik. Library ini menggunakan metode native di browser yang mendukungnya, dan menawarkan polyfill untuk Encoding API di browser yang belum menambahkan dukungan.

Pembaruan, September 2014: Mengubah contoh untuk mengilustrasikan pemeriksaan apakah Encoding API tersedia di browser saat ini.