避免 btoa Unicode 错误？试试 TextEncoder！

避免 btoa Unicode 错误？试试 TextEncoder！

引用

CSDN

等

7

来源

1.

https://m.blog.csdn.net/mx_2022/article/details/144747546

2.

https://blog.csdn.net/a460550542/article/details/107865508

3.

https://m.blog.csdn.net/song854601134/article/details/127994299

4.

https://developers.weixin.qq.com/community/develop/doc/000e280b104b38e5cb1b062d25ac00

5.

https://blog.csdn.net/qq_38834513/article/details/126719000

6.

https://www.digitalocean.com/community/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript

7.

https://support.microsoft.com/zh-cn/topic/%E5%86%99%E5%AD%97%E6%9D%BF%E6%97%A0%E6%B3%95%E5%B0%86-unicode-%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3%E5%8F%A6%E5%AD%98%E4%B8%BA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3-2c8ab709-4686-1b40-edd1-6b7e604450b1

在Web开发中，将字符串转换为Base64编码是一个常见的需求，比如在处理图片、音频等二进制数据时。然而，JavaScript内置的btoa函数只能处理ASCII字符，对于中文等Unicode字符则会抛出错误。为了解决这个问题，现代浏览器提供了一个更强大的工具——TextEncoder。

TextEncoder是什么？

TextEncoder是Web API的一部分，用于将JavaScript字符串转换为UTF-8编码的字节数组。这对于处理多语言文本特别有用，因为UTF-8可以表示世界上几乎所有的字符。

使用TextEncoder配合btoa，我们可以轻松地将包含Unicode字符的字符串转换为Base64编码，而不会出现错误。

如何使用TextEncoder？

下面是一个使用TextEncoder和btoa进行Base64编码的示例：

const text = "你好，世界！";
const encoder = new TextEncoder();
const uint8Array = encoder.encode(text);
const base64 = btoa(String.fromCharCode(...uint8Array));

console.log(base64); // 输出：5L2g5aW977yM5LiW55WM

解码的过程则相反：

const base64 = "5L2g5aW977yM5LiW55WM";
const binaryString = atob(base64);
const decoder = new TextDecoder();
const text = decoder.decode(new Uint8Array([...binaryString].map(c => c.charCodeAt(0))));

console.log(text); // 输出：你好，世界！

为什么选择TextEncoder？

相比传统的encodeURIComponent方法，TextEncoder有以下优势：

1. 更直接的UTF-8处理：TextEncoder直接生成UTF-8编码的字节数组，而不需要额外的替换操作。
2. 更好的可读性：代码更简洁，意图更明确。
3. 符合现代标准：作为Web API的一部分，TextEncoder是W3C标准，具有更好的前瞻性和兼容性。

兼容性考虑

TextEncoder在所有现代浏览器（Chrome、Firefox、Safari、Edge）中都得到了很好的支持。对于需要支持旧版IE的项目，可以考虑使用polyfill或兼容方案。

总结

当需要处理包含Unicode字符的字符串时，TextEncoder是一个强大且优雅的工具。它不仅解决了btoa的局限性，还提供了更直接、更标准的UTF-8编码方式。在现代Web开发中，推荐优先考虑使用TextEncoder而不是传统的encodeURIComponent方法。