HTML中如何使用TextEncoder和TextDecoder处理编码-html教程-PHP中文网

textencoder 和 textdecoder 仅支持 utf-8 编码转换，不处理 html 实体、gbk 等其他编码；encode() 返回 utf-8 字节而非码点；需复用实例、注意流式解码与浏览器兼容性。

html中如何使用textencoder和textdecoder处理编码

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

很多人看到 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'）都原样编码，不加前缀、不归一化、不忽略

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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 自动识别

直接 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(); // 复用，别放循环里

服务端返回分片的 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 并确保加载顺序