วิธีแปลง ArrayBuffer ไปยังและจากสตริง

ArrayBuffer ใช้เพื่อส่งข้อมูลดิบ และ API ใหม่หลายรายการใช้ ArrayBuffer นี้ ซึ่งรวมถึง WebSockets, Web Intents 2](https://www.html5rocks.com/en/tutorials/file/xhr2/) และ WebWorkers อย่างไรก็ตาม เนื่องจากเพิ่งเข้ามาในโลก JavaScript จึงทำให้บางครั้งมีการตีความหรือใช้เครื่องหมายเหล่านี้ในทางที่ผิด

ArrayBuffer เป็นเพียงอาร์เรย์ของไบต์ที่ดูผ่านมาสก์ที่เฉพาะเจาะจง มาสก์นี้เป็นอินสแตนซ์ของ ArrayBufferView ซึ่งจะกำหนดวิธีจัดแนวไบต์ให้ตรงกับโครงสร้างที่คาดไว้ของเนื้อหา เช่น หากทราบว่าไบต์ใน ArrayBuffer แสดงถึงอาร์เรย์ของจำนวนเต็มแบบไม่ลงนาม 16 บิต คุณก็แค่รวม ArrayBuffer ไว้ในมุมมอง Uint16Array แล้วจัดการองค์ประกอบโดยใช้ไวยากรณ์วงเล็บ เหมือนกับว่า Uint16Array เป็นอาร์เรย์จำนวนเต็ม

// suppose buf contains the bytes [0x02, 0x01, 0x03, 0x07]
// notice the multibyte values respect the hardware endianess, which is little-endian in x86
var bufView = new Uint16Array(buf);
if (bufView[0]===258) {   // 258 === 0x0102
    console.log("ok");
}
bufView[0] = 255;    // buf now contains the bytes [0xFF, 0x00, 0x03, 0x07]
bufView[0] = 0xff05; // buf now contains the bytes [0x05, 0xFF, 0x03, 0x07]
bufView[1] = 0x0210; // buf now contains the bytes [0x05, 0xFF, 0x10, 0x02]

คำถามที่พบบ่อยอย่างหนึ่งเกี่ยวกับ ArrayBuffer คือวิธีแปลง String เป็น ArrayBuffer และในทางกลับกัน เนื่องจาก ArrayBuffer นั้นเป็นอาร์เรย์ไบต์ การเปลี่ยนรูปแบบนี้จึงกำหนดให้ทั้ง 2 ฝั่งต้องเห็นด้วยกับวิธีแสดงอักขระในสตริงเป็นไบต์ คุณอาจเคยเห็น "ข้อตกลง" นี้มาก่อน นั่นคือการเข้ารหัสอักขระของสตริง (และ "ข้อกำหนดของข้อตกลง" ปกติ เช่น Unicode UTF-16 และ iso8859-1) ดังนั้น สมมติว่าคุณและอีกฝ่ายตกลงกันเรื่องการเข้ารหัส UTF-16 โค้ด Conversion อาจมีลักษณะดังนี้

function ab2str(buf) {
    return String.fromCharCode.apply(null, new Uint16Array(buf));
}
function str2ab(str) {
    var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
    var bufView = new Uint16Array(buf);
    for (var i=0, strLen=str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
    }
    return buf;
}

โปรดสังเกตการใช้ Uint16Array นี่คือมุมมอง ArrayBuffer ที่จัดแนวไบต์ของ ArrayBuffer เป็นองค์ประกอบ 16 บิต แต่จะไม่ได้จัดการการเข้ารหัสอักขระเอง ซึ่ง String.fromCharCode และ str.charCodeAt จะจัดการเป็น Unicode

คำถามยอดนิยมเกี่ยวกับเรื่องนี้ใน StackOverflow มีคำตอบที่ได้รับคะแนนสูงซึ่งใช้วิธีแก้ปัญหาการเปลี่ยนรูปแบบที่ค่อนข้างซับซ้อน ดังนี้ สร้าง FileReader เพื่อทำหน้าที่เป็นตัวแปลงและป้อน Blob ที่มีสตริงเข้าไป แม้ว่าวิธีนี้จะใช้งานได้ แต่อ่านยากและเราสงสัยว่าอาจช้า เนื่องจากความสงสัยที่ไม่มีมูลความจริงได้ทําให้เกิดข้อผิดพลาดมากมายในประวัติศาสตร์ของมนุษยชาติ เราจึงขอใช้แนวทางทางวิทยาศาสตร์มากกว่านี้ เราได้ทดสอบ 2 วิธีนี้ด้วย jsperf และผลลัพธ์ก็ยืนยันความสงสัยของเรา คุณสามารถดูการสาธิตได้ที่นี่

ใน Chrome 20 การใช้โค้ดการจัดการ ArrayBuffer โดยตรงในบทความนี้เร็วกว่าการใช้เมธอด FileReader/Blob เกือบ 27 เท่า