Konversi ArrayBuffer ke String yang lebih mudah dengan Encoding API

Jeff Posnick

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

Seperti yang ditunjukkan oleh contoh langsung ini, yang dikutip di bawah, Encoding API memudahkan penerjemahan antara byte mentah dan string JavaScript native, terlepas dari banyak encoding standar yang harus 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 perlu beralih kembali ke implementasi alternatif jika dukungan native tidak tersedia. Untungnya, library encoding teks yang disebutkan Renato dalam artikel aslinya masih merupakan pilihan yang bagus. Library ini menggunakan metode native pada browser yang mendukungnya, dan menawarkan polyfill untuk Encoding API pada browser yang belum menambahkan dukungan.

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