使用 Geocoding API 輕鬆從 ArrayBuffer 轉換為字串

兩年前,Renato Mangini曾介紹一種方法,可在原始 ArrayBuffers 與該資料的對應字串表示法之間進行轉換。在文章結尾,Renato 提到,我們正在起草,準備推出官方標準化 API,以便處理轉換。規格現已成熟,FirefoxGoogle Chrome 都已新增原生支援 TextDecoderTextEncoder 介面。

這個實際範例所示 (摘錄如下),無論您需要使用哪種標準編碼,Encoding API 都能輕鬆轉換原始位元組和原生 JavaScript 字串。

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

上述範例會使用功能偵測功能,判斷目前瀏覽器是否支援必要的 TextDecoder 介面,並在無法支援時顯示錯誤訊息。在實際應用程式中,如果沒有原生支援功能,您通常會改用其他實作方式。幸好,Renato 在原始文章中提到的文字編碼程式庫仍是不錯的選擇。這個程式庫會在支援原生方法的瀏覽器上使用原生方法,並在尚未新增支援的瀏覽器上提供 Encoding API 的 polyfill。

2014 年 9 月更新:修改範例,說明如何檢查目前瀏覽器是否支援 Encoding API。