为什么不用 `encodeURIComponent` 处理中文到 Base64？

使用 encodeURIComponent 和使用 TextEncoder + btoa 的区别，主要在于两者的目的和适用场景不同：

---

1. 为什么不用 encodeURIComponent 处理中文到 Base64？

1.1 encodeURIComponent 的目标

• 它的目标是为 URI（Uniform Resource Identifier） 提供安全编码。
• 会将非 ASCII 字符（例如中文）转换为百分号编码形式（如 %E4%BD%A0），适合用于 URL 参数等需要遵循 URI 规范的场景。

如果直接将 encodeURIComponent 的结果传递给 btoa：

• 会将已经转码的 %XX 形式再进行 Base64 编码，导致信息冗余，Base64 的输出会变得更长。
• 示例：
  • 中文 “你好” 转为 encodeURIComponent: %E4%BD%A0%E5%A5%BD
  • 再 btoa: JUVENCUJkAlRU5JUVCNCRCQ==（不必要的冗余编码）

---

1.2 TextEncoder 的目标

• 它直接将字符串转为 UTF-8 字节序列，然后再用 btoa 转为 Base64。
• 输出的是一个更短、更高效的 Base64 编码结果。

示例：

const utf8ToBase64 = (str) =>
  btoa(String.fromCharCode(...new TextEncoder().encode(str)));

console.log(utf8ToBase64('你好')); // 5L2g5aW9

这个结果直接基于 UTF-8 编码，不存在冗余。

---

2. 为什么要用 TextEncoder？

2.1 Base64 的输入要求

• btoa 的输入是 二进制字节流（ASCII 字符串）。
• 中文等非 ASCII 字符需要先转为字节形式（UTF-8 编码）才能通过 btoa 编码。

2.2 处理 Unicode

TextEncoder 和 TextDecoder 是现代 Web API，专门用于将 Unicode 数据转为字节流，便于处理和存储。这种方法非常适合直接处理非 ASCII 数据（如中文）。

---

3. 适用场景的选择

方法	适用场景	优势
encodeURIComponent	URL 参数、URI 编码	保证符合 URI 规范，操作简单
TextEncoder + btoa	通用字符串数据的 Base64 编码（尤其含中文）	输出更紧凑，适合存储或跨平台传输

---

4. 结论

• 如果你的目标是将中文等非 ASCII 数据直接转为 Base64，推荐使用 TextEncoder + btoa，因为它更加高效，结果更短。
• 如果你处理的是 URL 或需要百分号编码的数据，encodeURIComponent 更适合。