TextEncoder与TextDecoder是否互逆？二进制转字符串还原失败求助

你踩中了一个很常见的误区——TextEncoder和TextDecoder是专门为处理文本数据设计的，不能直接用来处理任意二进制数据！

为什么你的代码会失败？ #

TextDecoder在解码字节序列时，会严格遵循UTF-8编码规则。而你用crypto.getRandomValues生成的随机字节，大概率会包含不符合UTF-8规范的字节（比如单个的高位字节、不完整的多字节序列）。遇到这种情况，TextDecoder会自动将这些无效字节替换成替换字符�（U+FFFD），这就导致解码后的字符串已经丢失了原始二进制数据的信息。后续再用TextEncoder编码回去，自然得不到和原始缓冲区一致的字节了。

正确的解决方案：用Base64处理二进制与字符串的转换 #

处理二进制数据和字符串之间的转换，应该使用专门针对二进制的Base64编码/解码工具，比如btoa()和atob()，它们不会受字符编码规则的限制，能完整保留原始二进制信息。

下面是修正后的代码：

// 生成随机二进制缓冲区
const buffer = crypto.getRandomValues(new Uint8Array(12));

// 将Uint8Array转换为Base64字符串
function uint8ArrayToBase64(uint8Array) {
  return btoa(String.fromCharCode(...uint8Array));
}

// 将Base64字符串转换回Uint8Array
function base64ToUint8Array(base64) {
  const binaryString = atob(base64);
  const uint8Array = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }
  return uint8Array;
}

// 执行转换并验证
const base64Str = uint8ArrayToBase64(buffer);
const recomputedBuffer = base64ToUint8Array(base64Str);

// 查看结果
console.log("原始缓冲区：", buffer);
console.log("还原后的缓冲区：", recomputedBuffer);
console.log("是否完全一致：", JSON.stringify([...buffer]) === JSON.stringify([...recomputedBuffer]));

补充说明 #

如果你使用的是较新的浏览器环境，也可以借助Uint8Array的toString('base64')和Uint8Array.from结合Base64的方式，但btoa()和atob()是兼容性更好的传统方案，能覆盖绝大多数场景。

内容的提问来源于stack exchange，提问作者raxell