Chuyển đổi ArrayBuffer sang String dễ dàng hơn nhờ Mã hoá API

Hơn hai năm trước, Renato Mangini đã mô tả một phương thức để chuyển đổi giữa ArrayBuffers thô và bản trình bày chuỗi tương ứng của dữ liệu đó. Ở cuối bài đăng, Renato đề cập rằng một API chuẩn hoá chính thức để xử lý lượt chuyển đổi đang trong quá trình soạn thảo. Thông số kỹ thuật hiện đã hoàn thiện và cả FirefoxGoogle Chrome đều đã thêm tính năng hỗ trợ gốc cho các giao diện TextDecoderTextEncoder.

Như minh hoạ trong mẫu trực tiếp này, trích dẫn bên dưới, Encoding API giúp bạn dễ dàng dịch giữa các byte thô và chuỗi JavaScript gốc, bất kể bạn cần sử dụng phương thức mã hoá chuẩn nào trong số nhiều phương thức.

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

Mẫu trên sử dụng tính năng phát hiện tính năng để xác định xem trình duyệt hiện tại có giao diện TextDecoder bắt buộc hay không và hiển thị thông báo lỗi nếu không có. Trong một ứng dụng thực tế, bạn thường muốn quay lại phương thức triển khai thay thế nếu không có tính năng hỗ trợ gốc. May mắn thay, thư viện mã hoá văn bản mà Renato đề cập trong bài viết gốc của mình vẫn là một lựa chọn tốt. Thư viện này sử dụng các phương thức gốc trên những trình duyệt hỗ trợ các phương thức đó và cung cấp polyfill cho API mã hoá trên những trình duyệt chưa hỗ trợ.

Cập nhật tháng 9 năm 2014: Sửa đổi mẫu để minh hoạ việc kiểm tra xem trình duyệt hiện có Encoding API hay không.