如何使用 JavaScript 进行 Base64 编码和解码？

推荐答案

// www.javascriptcn.com code example
// Base64 编码
function base64Encode(str) {
  try {
     return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
     }));
  } catch (e) {
    return null; // 或者抛出异常，根据需求处理
  }
}

// Base64 解码
function base64Decode(str) {
  try {
    return decodeURIComponent(atob(str).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
  } catch (e) {
     return null; // 或者抛出异常，根据需求处理
  }
}


// 示例
const originalString = "你好，世界！🌍";
const encodedString = base64Encode(originalString);
console.log("Encoded:", encodedString); // 输出编码后的字符串

const decodedString = base64Decode(encodedString);
console.log("Decoded:", decodedString);  // 输出 "你好，世界！🌍"

本题详细解读

为什么需要 Base64 编码和解码？

Base64 是一种用 64 个可打印字符来表示任意二进制数据的方法。它的主要用途包括：

• 传输二进制数据： 例如，在 HTTP 请求中传递图片或音频等文件数据。
• 存储二进制数据： 例如，将图像数据内嵌在 HTML 或 CSS 文件中，实现 Data URL 的效果。
• 简单的数据编码： 虽然不是加密，但 Base64 可以将一些数据进行编码，使其不易直接阅读。

JavaScript 中的 Base64 实现

JavaScript 原生提供了两个函数用于 Base64 编码和解码：

• btoa()： 用于将字符串或二进制数据编码为 Base64 字符串。
• atob()： 用于将 Base64 字符串解码为原始字符串或二进制数据。

注意：

• btoa() 和 atob() 直接处理字符串时，可能遇到 Unicode 字符的问题，因为它们基于 ASCII 字符集。需要特殊处理才能正确处理 Unicode 字符，如中文或 Emoji。
• btoa() 接受的字符串必须是由单字节字符组成的，否则会抛出 DOMException 错误。
• 使用 btoa 和 atob 并不适合处理二进制数据, 因为它们会引入字符串编码转换问题。

Unicode 字符处理

推荐答案中的 base64Encode 和 base64Decode 函数通过以下方式来处理 Unicode 字符：

1. 编码时：
   • encodeURIComponent(str)： 首先使用 encodeURIComponent 将字符串中的 Unicode 字符编码为 UTF-8 格式的 URL 编码。
   • .replace(/%([0-9A-F]{2})/g, function(match, p1) { ... })： 然后将 URL 编码中的 %XX 格式转换为对应的 ASCII 字符，这样 btoa() 才能正确处理。
2. 解码时：
   • atob(str)： 首先使用 atob 解码 Base64 字符串，得到一个包含 ASCII 字符的字符串。
   • .split('').map(function(c) { ... }).join('')： 将每个 ASCII 字符转为对应的 UTF-8 格式的 URL 编码。
   • decodeURIComponent(...)： 最后使用 decodeURIComponent 将 UTF-8 URL 编码解码为原始的 Unicode 字符串。

这种处理方式确保了可以正确处理包含 Unicode 字符的字符串。

错误处理

推荐答案中的 try...catch 块是为了捕获 btoa 和 atob 在处理非预期输入时可能抛出的异常。返回 null 可以让调用者知道编码或解码失败了，可以根据实际需求抛出异常或者进行其他处理。