举例说明atob和btoa的用法

atob() 和 btoa() 是浏览器提供的 JavaScript 函数，用于在 Base64 编码和字符串之间进行转换。 btoa() 将字符串转换为 Base64 编码，atob() 将 Base64 编码的字符串转换回原始字符串。

btoa() - Binary to ASCII (字符串转 Base64)

const originalString = "Hello, world!";
const encodedString = btoa(originalString); 
console.log(encodedString); // 输出: "SGVsbG8sIHdvcmxkIQ=="

在这个例子中，btoa() 将字符串 "Hello, world!" 转换为 Base64 编码的字符串 "SGVsbG8sIHdvcmxkIQ==".

atob() - ASCII to Binary (Base64 转字符串)

const encodedString = "SGVsbG8sIHdvcmxkIQ==";
const decodedString = atob(encodedString);
console.log(decodedString); // 输出: "Hello, world!"

这里，atob() 将 Base64 编码的字符串 "SGVsbG8sIHdvcmxkIQ==" 转换回原始字符串 "Hello, world!".

处理 Unicode 字符

btoa() 直接处理 Unicode 字符可能会导致错误。 因为它预期输入是二进制数据或 ASCII 字符。 如果需要对包含 Unicode 字符的字符串进行 Base64 编码，需要先将其转换为 UTF-8 编码的字节数组，然后再进行 Base64 编码。可以使用如下方法：

function b64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode('0x' + p1);
  }));
}

const unicodeString = "你好，世界！";
const encodedUnicodeString = b64EncodeUnicode(unicodeString);
console.log(encodedUnicodeString); // 输出: "5L2g5aW977yM5LiW55WM"

解码时，需要进行反向操作：

function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

const decodedUnicodeString = b64DecodeUnicode(encodedUnicodeString);
console.log(decodedUnicodeString); // 输出: "你好，世界！"

总结

atob() 和 btoa() 提供了方便的 Base64 编码和解码功能。 但在处理 Unicode 字符时需要特别注意，需要进行额外的编码转换。 理解这些函数的工作原理以及如何处理 Unicode 字符对于前端开发非常重要，尤其是在处理数据传输、存储和安全相关的场景中。