javascript基础学习系列三百一十八:文本编码

Encoding API 提供了两种将字符串转换为定型数组二进制格式的方法:批量编码和流编码。把字符 串转换为定型数组时,编码器始终使用 UTF-8。

批量编码

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

   const textEncoder = new TextEncoder();

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

const textEncoder = new TextEncoder();
const decodedText = 'foo';
const encodedText = textEncoder.encode(decodedText);
// 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()要求分配一个新的 Unit8Array,encodeInto()则不需要。对于追求性能的应用,这个 差别可能会带来显著不同。

流编码

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);
} }
})();

Encoding API

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

Encoding API 提供了两种将定型数组转换为字符串的方式:批量解码和流解码。与编码器类不同, 在将定型数组转换为字符串时,解码器支持非常多的字符串编码,可以参考 Encoding Standard 规范的

“Names and labels”一节。 默认字符编码格式是 UTF-8。

批量解码

所谓批量,指的是 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
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值