Base64编码详解

7 阅读2分钟

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

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

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

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

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

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

  1. 分组 : 将原始二进制数据每3字节(24位)为一组进行处理。

  2. 转换 : 每组24位被分成4个6位块。

  3. 映射 : 每个6位块转为十进制数,并映射到Base64字符表,得到对应字符。

  4. 填充: 如果数据长度不是3的倍数,最后一组会不足3字节:

  • 只剩1字节(8位) :补16个0,分4组6位,只用前2个Base64字符,后2位用=填充,输出格式为“XX==”。
  • 只剩2字节(16位) :补8个0,分4组6位,只用前3个Base64字符,最后1位用=填充,输出格式为“XXX=”。
  • 正好3字节:无需填充,直接输出4个Base64字符。

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

转换函数

  • atobbase64 => 字符串 ⇒ 反序列化
  • btoa字符串 => base64 ⇒ 序列化
// 编码字符串为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 字符

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

// 处理包含中文的字符串
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);
// 输出: "你好,世界!"