JavaScript 原生 Base64 编码详解

Base64 编码是一种广泛使用的方法，用于在不同的系统和环境中传输二进制数据。在 JavaScript 中，你可以使用内置的 btoa() 和 atob() 函数来进行 Base64 编码和解码。本文将详细介绍如何使用 JavaScript 原生方法进行 Base64 编码和解码。

1. Base64 编码原理

Base64 编码将二进制数据转换为 ASCII 字符串，使得数据可以通过文本格式安全传输。编码后的字符串由字母 A-Z, a-z, 数字 0-9, + 和 / 组成，每四个字符表示 3 个字节的数据。

2. 使用 btoa() 进行编码

btoa() 函数用于将二进制数据编码为 Base64 字符串。它接受一个字符串参数，并返回一个 Base64 编码的字符串。

示例代码

// 编码字符串
const originalString = "Hello, World!";
const encodedString = btoa(encodeURIComponent(originalString));
console.log(encodedString); // 输出: "SGVsbG8sIFdvcmxkIQ=="

注意：encodeURIComponent() 用于确保字符串中的非 ASCII 字符被正确处理。

3. 使用 atob() 进行解码

atob() 函数用于将 Base64 编码的字符串解码为原始二进制数据的字符串表示。它接受一个 Base64 编码的字符串，并返回解码后的字符串。

示例代码

// 解码字符串
const encodedString = "SGVsbG8sIFdvcmxkIQ==";
const decodedString = decodeURIComponent(atob(encodedString));
console.log(decodedString); // 输出: "Hello, World!"

4. 处理非字符串数据

虽然 btoa() 和 atob() 函数主要用于处理字符串，但你也可以将非字符串数据转换为字符串进行编码和解码。

示例：编码和解码数组

// 将数组转换为字符串
const array = [1, 2, 3, 4, 5];
const arrayString = array.join(",");
const encodedArray = btoa(arrayString);
console.log(encodedArray); // 输出: "MS4yLjMuNC4x"

// 将编码后的字符串转换回数组
const decodedArrayString = atob(encodedArray).split(",");
const decodedArray = decodedArrayString.map(item => parseInt(item, 10));
console.log(decodedArray); // 输出: [1, 2, 3, 4, 5]

5. 注意事项

• btoa() 和 atob() 只适用于 ASCII 字符串。对于包含非 ASCII 字符的字符串，你需要先使用 encodeURIComponent() 和 decodeURIComponent() 进行编码和解码。
• 编码后的 Base64 字符串可能包含 = 字符，用于填充。这是 Base64 编码的标准部分，不应被删除或修改。

6. 实用场景

Base64 编码在多种场景下非常有用，例如：

• 数据传输：在不支持二进制数据的系统（如某些文本协议）中传输二进制数据。
• 图像嵌入：在 HTML 或 CSS 中嵌入图像数据。
• 数据隐藏：在网页中隐藏数据，例如，通过 Base64 编码的图片或字体。

结论

JavaScript 的 btoa() 和 atob() 函数提供了一种简单有效的方法来处理 Base64 编码和解码。通过本文的介绍，你应该能够理解如何使用这些函数，并在需要时正确地应用它们。记住，正确处理非 ASCII 字符和数据类型转换是使用这些函数时的关键。