Base64编码详解

Base64是一种将二进制数据编码为ASCII字符的编码方式。

它使用64个可打印字符（A-Z、a-z、0-9、+、/）来表示二进制数据，使数据可以在只支持文本的传输协议中安全传输。

base64 可以将二进制变成ASCII字符组成的字符串

使数据可以在只支持文本的传输协议中安全传输。
可以将二进制资源嵌入HTML、CSS、JSON中，减少额外的网络请求

但是 base64 后字符串的体积会比原本二进制时体积要大大约 33%

Base64 编码的过程可以分为以下几个步骤：

分组：将原始二进制数据每 3 个字节（共 24 位）为一组进行处理。如果数据长度不是 3 的倍数，则需要在末尾补 = 号以凑满 4 个 Base64 字符。
- 如果剩余 1 个字节，补 2 个 =
- 如果剩余 2 个字节，补 1 个 =
转换：每组 3 字节（24 位）被拆分为 4 个 6 位的块。
映射：每个 6 位的块根据 Base64 字符表，转换为对应的 Base64 字符。

这样处理后，原始的二进制数据就被转化为只包含可打印字符的 Base64 字符串，适合在文本环境中安全传输和存储。

转换函数

atob ⇒ base64 => 字符串 ⇒ 反序列化
btoa ⇒ 字符串 => base64 ⇒ 序列化

js 复制代码

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

// 解码Base64为字符串
const decoded = atob(encoded);
console.log(decoded);
// 输出: "Hello, World!"

⚠️ btoa 和 atob 这两个函数不能直接处理中文等非 ASCII 字符

所以如果存在中文，需要先使用百分比编码等方式作为其中间编码过程

js 复制代码

// 处理包含中文的字符串
function encodeUnicode(str) {
  return btoa(encodeURIComponent(str));
}

function decodeUnicode(str) {
  return decodeURIComponent(atob(str));
}

const chineseString = "你好，世界！";
const encoded = encodeUnicode(chineseString);
console.log(encoded);
// 输出: "5L2g5aW977yM5LiW55WM77yB"

const decoded = decodeUnicode(encoded);
console.log(decoded);
// 输出: "你好，世界！"