TextEncoder与TextDecoder编码处理方法

本文深入解析了HTML中TextEncoder和TextDecoder的核心用途与关键限制：它们仅专注且严格地实现UTF-8字节与字符串之间的双向转换，既不支持HTML实体转义、也不兼容GBK等其他编码格式；encode()返回的是UTF-8字节序列而非Unicode码点，实际使用中需复用实例、妥善处理流式解码场景，并留意浏览器兼容性细节——想高效处理UTF-8编码？它们是轻量可靠的选择，但务必牢记：它们只做这一件事，且只做这一件事。

直接用 TextEncoder 和 TextDecoder 就行，但必须清楚它们只干一件事：UTF-8 字节 ↔ 字符串的严格转换。不是 HTML 编码，不处理 < 或 &，也不支持 GBK、UTF-16 等其他编码。

TextEncoder.encode() 返回的是 UTF-8 字节，不是字符码点

很多人看到 encoder.encode('中') 得到 Uint8Array(3) [228, 189, 160]，就以为这是“ASCII 值”或“Unicode 码点”，其实完全不是：

• '中' 的 Unicode 码点是 U+4E2D（十进制 20013），但 UTF-8 编码后是 3 字节：0xE4 0xB8 0xAD
• for...of 遍历结果会拿到单个字节（如 228），不是字符；想取首字符得用 String.fromCodePoint() 配合 codePointAt(0)
• encoder.encode('\uD83D\uDE00')（?）正确返回 4 字节 [0xF0, 0x9F, 0x98, 0x80]，不会截断或报错
• 空字符串、BOM（'\uFEFF'）、控制符（'\0'）都原样编码，不加前缀、不归一化、不忽略

为什么不能 new TextEncoder('gbk') 或 new TextEncoder('utf-16le')

TextEncoder 构造函数只接受 'utf-8'（大小写不敏感），传其他值会立刻抛出 TypeError: The encoding label provided ('xxx') is invalid.：

• new TextEncoder() 和 new TextEncoder('utf-8') 完全等价
• 浏览器原生不提供 GBK、Shift-JIS、UTF-16 等编码能力；需要这些，必须用 polyfill（如 text-encoding 库）或服务端转换
• TextDecoder 虽然构造时可传其他编码名（如 new TextDecoder('gbk')），但仅在部分浏览器 + polyfill 下生效，原生仅保证 'utf-8' 可靠
• 别在生产环境依赖 TextDecoder('utf-16') —— 它的行为跨浏览器不一致，且无法处理 BOM 自动识别

WebSocket / fetch / WebCrypto 场景下必须显式 encode

直接 ws.send('hello') 看似简单，但隐藏风险；涉及二进制协议、长度头、拼包或服务端非标准解析时，必须走字节流：

• WebSocket 发送文本帧时，浏览器虽默认 UTF-8 编码字符串，但你无法干预过程；若后端按字节流解析（比如前 2 字节是 payload 长度），就必须用 encoder.encode() 后手动拼接
• fetch() 的 body 为 Uint8Array 时，服务端收到的就是原始字节；若传字符串，中间可能被代理重编码或截断
• WebCrypto 的 encrypt()、digest() 等 API 只接受 BufferSource（即 ArrayBuffer 或 TypedArray），必须先 encoder.encode()
• 缓存 TextEncoder 实例比每次 new 更高效，尤其高频发送场景：const encoder = new TextEncoder(); // 复用，别放循环里

TextDecoder 解码 ArrayBuffer 时注意 stream 选项

服务端返回分片的 ArrayBuffer（比如大文件下载、长消息流式推送），不用 stream: true 会丢数据：

• decoder.decode(uint8array) 默认当作完整输入；若传入的是片段（如只收到前 100 字节），可能卡在代理对或 UTF-8 多字节边界上，返回空或乱码
• 正确做法是创建解码器时启用流式：const decoder = new TextDecoder('utf-8', {stream: true});，然后每次调用 decoder.decode(chunk, {stream: true})，最后补一次 decoder.decode() 收尾
• TextDecoder 不支持流式编码 —— TextEncoder 没有 encodeInto 以外的流式接口，必须一次性传完整字符串
• IE 完全不支持 TextDecoder，需引入 text-encoding polyfill 并确保加载顺序

最常被忽略的一点：TextEncoder 和 TextDecoder 是纯字节工具，和 HTML 实体（&、<）完全无关。要防 XSS 或渲染 HTML 片段，该用 HtmlEncoder 或 DOMPurify，别混进来。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~