如何在HTML5中利用TextEncoder与Decoder处理二进制流与字符串转换-H5教程-PHP中文网

textencoder和textdecoder是html5原生api，用于在utf-8字符串与uint8array二进制数据间高效、标准转换，适用于websocket、fetch流、文件读取等场景；textencoder仅支持utf-8编码，encode()静默处理非法码点，textdecoder支持stream模式以安全解码分块数据。

如何在html5中利用textencoder与decoder处理二进制流与字符串转换

TextEncoder 和 TextDecoder 是 HTML5 提供的原生 API，用于在字符串（UTF-8 编码）与 Uint8Array 二进制数据之间高效、标准地转换，特别适合处理网络流、文件读取、WebSocket 通信或加密/解密场景。它们默认使用 UTF-8，不依赖第三方库，且性能优于手动拆解 charCodeAt。

TextEncoder：把字符串转为二进制（Uint8Array）

TextEncoder 只支持编码为 UTF-8，构造后调用 encode() 方法即可获得字节序列：

const encoder = new TextEncoder();
const uint8array = encoder.encode("Hello 你好 ?"); // 返回 Uint8Array
console.log(uint8array); // Uint8Array(17) [72, 101, 108, 108, 111, 32, 228, 189, 160, 229, 165, 189, 32, 240, 159, 140, 141]

注意：encode() 不会抛错，但会静默替换非法 Unicode 码点（如代理对不完整时）为（U+FFFD）；若需严格校验，应先用 String.fromCodePoint() 或正则预检。

TextDecoder：把二进制还原为字符串

TextDecoder 默认按 UTF-8 解码，也可指定其他编码（如 'utf-16le'），适用于处理 ArrayBuffer、TypedArray 或 ReadableStream 的 chunks：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

基础用法：直接传入 Uint8Array

const decoder = new TextDecoder();
const str = decoder.decode(uint8array); // "Hello 你好 ?"

流式解码（处理分块数据）：启用 stream: true，避免末尾截断多字节字符

const decoder = new TextDecoder('utf-8', { stream: true });
let result = '';
result += decoder.decode(chunk1); // chunk1 是前半部分 Uint8Array（可能截断 UTF-8 字节）
result += decoder.decode(chunk2); // chunk2 补全，自动恢复状态
result += decoder.decode(); // 传空值，清空内部缓冲并返回剩余内容

⚠️ 若未启用 stream: true 而传入不完整 UTF-8 字节（如只传了 3 字节的“你”的前两个字节），decode 会直接报错或返回乱码。

配合 Fetch / Streams API 处理响应体流

这是典型实用场景：边接收 HTTP 响应边解码文本，节省内存：

async function fetchAndDecodeText(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8', { stream: true });
  let result = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += decoder.decode(value, { stream: true });
  }
  result += decoder.decode(); // 清空残留缓冲

  return result;
}

该方式比 response.text() 更可控，尤其适合大文本或实时日志流。

常见陷阱与注意事项

TextEncoder 只支持 UTF-8 编码，不支持 GBK、ISO-8859-1 等旧编码；需其他编码时，可用 polyfill 或 util.TextDecoder（Node.js）
TextDecoder 实例有内部状态（尤其开启 stream 后），不可复用解码多个独立数据块；每个逻辑流应新建实例或显式调用 decode() 清空
二进制数据若含 BOM（如 UTF-8 BOM 0xEF 0xBB 0xBF），TextDecoder 会自动跳过；TextEncoder 不会自动添加 BOM
与 atob()/btoa() 或 Buffer.from(..., 'base64') 不同，TextEncoder/Decoder 不处理 Base64，仅负责 UTF-8 ↔ 字节映射