JavaScript 文本编码解码详解笔记

JavaScript 文本的编码解码

文本编码

文本编码方法分为批量编码和流编码。

1、批量编码
所谓批量编码，指的是JavaScript引擎会同步编码整个字符串。对于非常长的字符串，可能会花较长时间。批量编码是通过TextEncoder的实例完成的：

const textEncoder = new TextEncoder();

实例上有一个encode()方法，该方法接收一个字符串参数，并以Unit8Array格式返回每个字符的UTF-8编码。

const textEncoder = new TextEncoder();
const decoderText = 'foo';
const encoderText = textEncoder.encode(decoderText);

//  f 的 UTF-8 编码是 0x66（即十进制 102）
//  o 的 UTF-8 编码是 0x6F（即二进制 111）
console.log(encodedText); //  Uint8Array(3) [102, 111, 111] 

编码器用于处理字符的，有些字符（如表情符号）在最终返回的数组中可能占多个索引：

const textEncoder = new TextEncoder(); 
const decodedText = '☺'; 
const encodedText = textEncoder.encode(decodedText);

//  ☺的 UTF-8 编码是 0xF0 0x9F 0x98 0x8A（即十进制 240、159、152、138）
console.log(encodedText); // Uint8Array(4) [240, 159, 152, 138] 

编码器实例还有一个encodeInto() 方法，该方法接收一个字符串和目标Unit8Array返回一个字典，该字典包含read和written属性，分别表示成功从源字符串读取了多少字符或向目标数组写入了多少字符。如果定型数组的空间不够，编码就会提前终止，返回的字典会提现这个结果：

const textEncoder = new TextEncoder(); 
const fooArr = new Uint8Array(3); 
const barArr = new Uint8Array(2); 
const fooResult = textEncoder.encodeInto('foo', fooArr);
const barResult = textEncoder.encodeInto('bar', barArr);

console.log(fooArr); // Uint8Array(3) [102, 111, 111] 
console.log(fooResult); // { read: 3, written: 3 }
console.log(barArr); // Uint8Array(2) [98, 97]   提前终止了
console.log(barResult); // { read: 2, written: 2 }  结果提前终止了

在定型数组的空间不够的情况下，encode()要求分配一个新的unit8Arrayy，encode()则不需要。对于追求性能问题，这个差别可能会带来显著问题。

**注意：**文本编码会始终使用UTF-8格式，而且必须写入unit8Array实例。使用其他类型数组会导致encodeInto()抛出错误。

2、流编码
TextEncoderStream其实就是TransformStream形式的TextEncoder。讲解码后的文本流通过管道输入流编码器会得到编码后文本块的流：

async function* chars() { 
 const decodedText = 'foo'; 
 for (let char of decodedText) { 
 yield await new Promise((resolve) => setTimeout(resolve, 1000, char)); 
 } 
} 
const decodedTextStream = new ReadableStream({ 
 async start(controller) { 
 for await (let chunk of chars()) { 
 controller.enqueue(chunk); 
 } 
 controller.close(); 
 } 
}); 
const encodedTextStream = decodedTextStream.pipeThrough(new TextEncoderStream()); 
const readableStreamDefaultReader = encodedTextStream.getReader(); 
(async function() { 
 while(true) { 
 const { done, value } = await readableStreamDefaultReader.read(); 
 if (done) { 
 break; 
 } else { 
 console.log(value); 
 } 
 } 
})(); 

// Uint8Array[102] 
// Uint8Array[111] 
// Uint8Array[111] 

文本解码

1、批量解码
所谓批量，指的是JavaScript引擎会同步解码整个字符串。对于非常长的的字符串，可能会花较长时间。批量解码是通过TextDecoder的实例完成的：

const textDecoder = new TextDecoder();

在这个实例上有一个decode() 方法，该方法接收一个定型数组参数，返回解码后的字符串：

const textDecoder = new TextDecoder(); 
// f 的 UTF-8 编码是 0x66（即十进制 102）
// o 的 UTF-8 编码是 0x6F（即二进制 111）
const encodedText = Uint8Array.of(102, 111, 111); 
const decodedText = textDecoder.decode(encodedText);
console.log(decodedText); // foo 

与 TextEncoder 不同，TextDecoder 可以兼容很多字符编码。比如下面的例子就使用了 UTF-16
而非默认的 UTF-8：

const textDecoder = new TextDecoder('utf-16'); 
// f 的 UTF-8 编码是 0x0066（即十进制 102）
// o 的 UTF-8 编码是 0x006F（即二进制 111）
const encodedText = Uint16Array.of(102, 111, 111); 
const decodedText = textDecoder.decode(encodedText); 
console.log(decodedText); // foo 

2. 流解码
TextDecoderStream 其实就是 TransformStream 形式的 TextDecoder。将编码后的文本流通
过管道输入流解码器会得到解码后文本块的流：

async function* chars() { 
 // 每个块必须是一个定型数组
 const encodedText = [102, 111, 111].map((x) => Uint8Array.of(x)); 
 for (let char of encodedText) { 
 yield await new Promise((resolve) => setTimeout(resolve, 1000, char)); 
 } 
} 
const encodedTextStream = new ReadableStream({ 
 async start(controller) { 
 for await (let chunk of chars()) { 
 controller.enqueue(chunk); 
 } 
 controller.close(); 
 } 
}); 
const decodedTextStream = encodedTextStream.pipeThrough(new TextDecoderStream());
const readableStreamDefaultReader = decodedTextStream.getReader(); 
(async function() { 
 while(true) { 
 const { done, value } = await readableStreamDefaultReader.read(); 
 if (done) { 
 break; 
 } else { 
 console.log(value); 
 } 
 } 
})(); 
// f 
// o 
// o