javascript高级编程系列 - 前端开发中如何处理base64编码

在 JavaScript 中，除了 window.btoa(unescape(encodeURIComponent(s))) 这种方式，还有多种以下几种常用的 Base64 编码方法，适用于不同场景：

1. 使用 TextEncoder 和 btoa（现代标准方法）

针对包含非 ASCII 字符（如中文）的字符串，更规范的做法是使用 TextEncoder 将字符串转换为 UTF-8 字节数组，再进行编码：

function encodeBase64(str) {
  // 将字符串转换为 UTF-8 字节数组
  const encoder = new TextEncoder();
  const bytes = encoder.encode(str);
  // 将字节数组转换为 btoa 可处理的 ASCII 字符串
  const asciiStr = String.fromCharCode(...bytes);
  // 进行 Base64 编码
  return btoa(asciiStr);
}

// 示例：编码中文字符
console.log(encodeBase64("Hello，世界")); // 输出：SGVsbG875LiW55WM

2. 使用 Node.js 内置模块（后端环境）

在 Node.js 中，可直接使用 Buffer 进行 Base64 编码，无需额外处理字符编码：

// 编码
function encodeBase64Node(str) {
  return Buffer.from(str, 'utf8').toString('base64');
}

// 示例
console.log(encodeBase64Node("Hello，世界")); // 输出：SGVsbG875LiW55WM

3. 使用第三方库（兼容性更好）

如果需要兼容旧环境或处理复杂场景，可使用成熟的第三方库，例如：

• base64-js：轻量的 Base64 编码/解码库
• js-base64：支持 Unicode 字符的全面实现

以 js-base64 为例（需先安装：npm install js-base64）：

import { Base64 } from 'js-base64';

// 编码
const encoded = Base64.encode("Hello，世界");
console.log(encoded); // 输出：SGVsbG875LiW55WM

4. 自定义 Base64 编码函数（了解原理）

如果想深入理解 Base64 编码原理，可手动实现简易版本（仅建议学习使用）：

function customBase64Encode(str) {
  const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  let result = '';
  let i = 0;
  
  // 处理字符串为 UTF-8 字节
  const encoder = new TextEncoder();
  const bytes = encoder.encode(str);
  
  while (i < bytes.length) {
    // 取 3 个字节为一组，转换为 4 个 Base64 字符
    const byte1 = bytes[i++] || 0;
    const byte2 = bytes[i++] || 0;
    const byte3 = bytes[i++] || 0;
    
    const chunk = (byte1 << 16) | (byte2 << 8) | byte3;
    result += base64Chars[(chunk >> 18) & 0x3F];
    result += base64Chars[(chunk >> 12) & 0x3F];
    result += i > bytes.length + 1 ? '=' : base64Chars[(chunk >> 6) & 0x3F];
    result += i > bytes.length ? '=' : base64Chars[chunk & 0x3F];
  }
  return result;
}

总结

• 浏览器环境：优先使用 TextEncoder + btoa 的组合，替代旧的 unescape 方式。
• Node.js 环境：直接使用 Buffer 更简洁高效。
• 复杂场景：推荐使用成熟的第三方库（如 js-base64），避免重复造轮子。

这些方法都能正确处理包含中文、 emoji 等非 ASCII 字符的字符串，且兼容性更好。