การแปลง ArrayBuffer ไปยังสตริงที่ง่ายขึ้นด้วย API การเข้ารหัส

Jeff Posnick

เมื่อกว่า 2 ปีที่แล้ว Renato Mangini ได้อธิบายวิธีการในการแปลงระหว่าง ArrayBuffers ดิบกับการนําเสนอสตริงที่สอดคล้องกันของข้อมูลนั้น ในตอนท้ายของโพสต์ Renato ระบุว่า API มาตรฐานอย่างเป็นทางการเพื่อจัดการ Conversion อยู่ระหว่างการร่าง ตอนนี้ข้อกำหนดได้พัฒนาแล้ว และทั้ง Firefox และ Google Chrome ได้เพิ่มการรองรับอินเทอร์เฟซ TextDecoder และ TextEncoder โดยตรง

ดังที่แสดงในตัวอย่างการใช้งานจริงนี้ซึ่งคัดลอกไว้ด้านล่าง 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 พูดถึงในบทความต้นฉบับยังคงเป็นตัวเลือกที่ดี ไลบรารีนี้ใช้เมธอดดั้งเดิมในเบราว์เซอร์ที่รองรับ และให้บริการ polyfill สําหรับ Encoding API ในเบราว์เซอร์ที่ยังไม่ได้เพิ่มการรองรับ

ข้อมูลอัปเดตเดือนกันยายน 2014: แก้ไขตัวอย่างเพื่อแสดงการตรวจสอบว่าเบราว์เซอร์ปัจจุบันมี Encoding API หรือไม่