使用btoa对字符串Base64编码时变音符号丢失问题求助

这个问题我之前也碰到过，根源在于**btoa()函数只支持ASCII范围内的字符（U+0000到U+00FF）**。当你传入带变音符号的Unicode字符（比如é、ü、ñ这些）时，它会直接截断字符的高8位字节，导致变音符号信息丢失，解码后自然就看不到这些符号了。测试页正常可能是因为它偷偷做了字符编码转换，或者你测试的字符串刚好没触发这个问题。

下面给你两种靠谱的解决方法，适配不同场景：

方法一：兼容旧浏览器的经典方案 #

利用encodeURIComponent和unescape先把Unicode字符串转成UTF-8字节对应的ASCII序列，再用btoa编码：

// 编码：Unicode字符串 → Base64
function unicodeToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

// 解码：Base64 → Unicode字符串
function base64ToUnicode(str) {
  return decodeURIComponent(escape(atob(str)));
}

举个例子：

const original = "Mötörhead";
const encoded = unicodeToBase64(original); // 得到 "TW7DpG9yZWhlYWQ="
const decoded = base64ToUnicode(encoded); // 还原为 "Mötörhead"

方法二：现代浏览器推荐方案（使用TextEncoder） #

如果你的目标浏览器支持ES6+（现在绝大多数浏览器都支持），用TextEncoder直接把字符串转成UTF-8字节数组，再转成可被btoa处理的ASCII字符串：

// 编码：Unicode字符串 → Base64
function unicodeToBase64(str) {
  const encoder = new TextEncoder();
  const utf8Bytes = encoder.encode(str);
  // 把Uint8Array转成ASCII字符串
  const asciiStr = String.fromCharCode(...utf8Bytes);
  return btoa(asciiStr);
}

// 解码：Base64 → Unicode字符串
function base64ToUnicode(str) {
  const binaryStr = atob(str);
  const bytes = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    bytes[i] = binaryStr.charCodeAt(i);
  }
  const decoder = new TextDecoder();
  return decoder.decode(bytes);
}

额外检查：确保页面字符编码正确 #

别忘了检查你的网页头部是否设置了UTF-8编码：

<meta charset="UTF-8">

如果页面编码不对，字符串在传入btoa之前就可能已经被错误转换，导致变音符号提前丢失。

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