JavaScript 中的 base64 函数

这里的 base64 函数指浏览器实现的 btoaatob,初使用,会很奇怪,为什么不是 base64Encodebase64Decode

命名

关于为何使用 btoaatob 命名,JavaScript 的发明者 Brendan Eich 如是说:

Old Unix names, hard to find man pages rn but see https://www.unix.com/man-page/minix/1/btoa/ The names carried over from Unix into the Netscape codebase. I reflected them into JS in a big hurry in 1995 (after the ten days in May but soon).

参见:https://twitter.com/BrendanEich/status/998618208725684224

为了方便记忆,标准这样解释:

In these APIs, for mnemonic purposes, the “b” can be considered to stand for “binary”, and the “a” for “ASCII”. In practice, though, for primarily historical reasons, both the input and output of these functions are Unicode strings.

参见:https://html.spec.whatwg.org/multipage/webappapis.html#atob

我们可以这样理解:

  • b 代表 binary,表示任意的数据。
  • a 代表 ASCII,表示 base64 字符串,因为 base64 编码后的字符串只能由 A-Za-z0-9+/=ASCII 字符构成。

兼容性

btoaatob 可在 IE9 以上的现代浏览器中使用:https://caniuse.com/#feat=atob-btoa

使用

btoa 表示编码:

1
2
document.write(btoa('Jay'))
/* ↓↓↓↓↓↓ */

atob 表示解码:

1
2
3
```js
document.write(atob('SmF5'))
/* ↓↓↓↓↓↓ */

支持中文

由于 btoaatob 仅仅支持对在 Latin1 范围的字符进行 base64 编解码,因此在处理中文等 Unicode 字符时,需先进行编码转换:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* base64 编码
* @param str 原始字符串
*/
function base64Encode(str) {
return (
btoa( // 对 Latin1 字符串进行 base64 编码
unescape( // 使用 Latin1 解码转义序列
encodeURIComponent( // 用一到四个转义序列来表示字符串中的每个字符的 UTF-8 编码
str
)
)
)
)
}

/**
* base64 解码
* @param str 加密字符串
*/
function base64Decode(str) {
return (
decodeURIComponent( // 使用 UTF-8 解码转义序列
escape( // 使用 Latin1 转义字符串
atob( // 解码 base64 字符串
str
)
)
)
)
}

// 测试
document.write(base64Encode('中国'))
document.write('<br />')
document.write(base64Decode('5Lit5Zu9'))
/* ↓↓↓↓↓↓ */