javascript基础学习系列四百九十二：流编码

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

async function* chars() {
      const decodedText = 'foo';
for (let char of decodedText) {
yield await new Promise((resolve) => setTimeout(resolve, 1000, char));

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

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) { 19
        const { done, value } = await readableStreamDefaultReader.read();
        if (done) {
          break;
        } else {
          console.log(value);
} }
})();

文本解码

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

Encoding API 提供了两种将定型数组转换为字符串的方式:批量解码和流解码。与编码器类不同， 在将定型数组转换为字符串时，解码器支持非常多的字符串编码，可以参考 Encoding Standard 规范的 “Names and labels”一节。 默认字符编码格式是 UTF-8。

1. 批量解码

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

    const textDecoder = new TextDecoder();

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

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

解码器不关心传入的是哪种定型数组，它只会专心解码整个二进制表示。在下面这个例子中，只包 含 8 位字符的 32 位值被解码为 UTF-8 格式，解码得到的字符串中填充了空格:

   const textDecoder = new TextDecoder();
// f 的 UTF-8 编码是 0x66(即十进制 102)
// o 的 UTF-8 编码是 0x6F(即二进制 111)
const encodedText = Uint32Array.of(102, 111, 111); const decodedText = textDecoder.decode(encodedText);
    console.log(decodedText);  // "f   o   o   "
  解码器是用于处理定型数组中分散在多个索引上的字符的，包括表情符号:
    const textDecoder = new TextDecoder();
// ☺的UTF-8编码是0xF0 0x9F 0x98 0x8A(即十进制240、159、152、138) const encodedText = Uint8Array.of(240, 159, 152, 138);
const decodedText = textDecoder.decode(encodedText);
console.log(decodedText); // ☺
与 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

流解码

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

文本解码器流能够识别可能分散在不同块上的代理对。解码器流会保持块片段直到取得完整的字 符。比如在下面的例子中，流解码器在解码流并输出字符之前会等待传入 4 个块: