קל יותר מ-ArayBuffer להמרת מחרוזת באמצעות ממשק ה-API של הקידוד

לפני יותר משנתיים, Renato Mangini תיאר שיטה להמרה בין ArrayBuffers גולמיים לבין ייצוג המחרוזת התואם של הנתונים האלה. בסוף הפוסט, Renato ציין ש-Google כותבת טיוטה של ממשק API סטנדרטי רשמי לטיפול בהמרה. המפרט הושלם, וגם 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 הזכיר במאמר המקורי שלו עדיין היא בחירה טובה. הספרייה משתמשת בשיטות הילידיות בדפדפנים שתומכים בהן, ומציעה פוליפולים ל-Encoding API בדפדפנים שעדיין לא נוספה להם תמיכה.

עדכון, ספטמבר 2014: שינינו את הדוגמה כדי להמחיש בדיקה אם Encoding API זמין בדפדפן הנוכחי.