之前在某个项目中，遇到了许多JS的二进制操纵场景，因而总结下JS中的二进制操纵要领。

所谓二进制操纵，是指操纵变量现实存储的值，比方猎取字符A的Unicode值，或许将值100填入到8个字节中。

1. 位操纵符

JS中的位操纵与许多言语相似，细致的位运算符如下表所示。

2. 字符和Unicode编码

在引见细致的要领前，我们须要先了解下UCS-2和UTF-16编码。

UCS-2是一个16bit长度的编码集，它的示意局限是0到0xFFFF。UTF-16的示意局限是0到0x10FFFF，它由1个或许2个16bit的编码单位构成。个中UCS-2是UTF-16的子集，UTF-16编码在0到0x00FFFF的局限称为BMP（基础多文种平面），BMP与UCS-2的编码完全一致。

更细致的申明能够参考这里。

2.1 String.fromCharCode

fromCharCode 要领返回指定的UCS-2编码对应的字符串。它是String上的静态要领，不可经由过程字符串对象直接接见。

由于入参是UCS-2编码值，所以不能多于16bit，即入参值要小于65536。假如入参须要大于65536，能够运用 String.fromCodePoint 。

String.fromCharCode(65) // A
String.fromCharCode(65, 66, 68) // ABD

2.2 String.prototype.charCodeAt

charCodeAt 返回字符串指定位置的字符的UTF-16编码。该要领能够直接从字符串对象举行挪用。

假如该字符不能运用一个UTF-16编码单位（16bit）来示意时，该要领只会返回第一个编码单位。假如须要猎取完全的编码，能够运用 String.prototype.codePointAt 。

"AB".charCodeAt(0) // 65
"AB".charCodeAt(1) // 66

3. ArrayBuffer

ArrayBuffer用来示意原始的二进制数据缓存区，然则不可直接对ArrayBuffer举行操纵，须要借助DataView或许范例数组对象来对缓存区的内容举行读写。

3.1 DataView

DataView 能够理解为数据视窗，经由过程 DataView 对象能够对 ArrayBuffer 举行读写操纵。

const buffer = new ArrayBuffer(4); // 请求2个字节长度的缓存区
const view1 = new DataView(buffer); // view1的局限是全部缓存区
const view2 = new DataView(buffer, 2, 1) // view2的局限是从第2个字节最先今后的一个字节

// 向一个16bit的内容中填入一个带标记的数
// 参数的寄义依次为 输入内容的位置、输入的值、是不是运用小端体式格局(默许大端）
view1.setInt16(0, 0x0A0B, false);
view1.getInt8(0); // 10，即0x0A
view1.getInt8(1); // 11，即0x0B

view2.setUint8(0, 255);
view2.getInt8(0); // 根据有标记数来读取，效果为-1

更多的操纵要领能够参考DataView。

3.2 范例数组对象

范例数组对象有许多种，比方Uint8Array, Int32Array等。将ArrayBuffer转化为范例数组后，就能够像数组一样来操纵缓存区。

const buffer = new ArrayBuffer(8);

const arr1 = new Int16Array(buffer);
const arr2 = new Uint8Array(buffer);

arr1[0] = 256;
arr2[6] = 255;

console.log(arr1); // [256, 0, 0, 255]
console.log(arr2); // [0, 1, 0, 0, 0, 0, 255, 0]

参考文献

1. 按位操纵符 – JavaScript | MDN
2. Unicode字符平面映照
3. JavaScript’s internal character encoding: UCS-2 or UTF-16?
4. String.fromCharCode() – JavaScript | MDN
5. String.prototype.charCodeAt() – JavaScript | MDN
6. ArrayBuffer – JavaScript | MDN