简介#

Base64 是一种将任意二进制数据转换为可打印 ASCII 字符的编码方式。它本质上是 二进制 → 文本 的编码方案，常用于网络传输或文本协议中嵌入二进制数据。

一个常见的误区是将 Base64 看作为加密算法，实际上 Base64 只是一种编码方式，不具备加密功能。

Base64 使用 6 bit 表示一个字符，因此有 2^6 = 64 个不同字符，编码表包含：

• 26 个大写字母
• 26 个小写字母
• 10 个数字
• 2 个符号：+ 和 /
• = 用于填充

下面是标准 Base64 编码表：

编码步骤#

当对字符串进行 Base64 时，必须先根据某种字符集（通常是 UTF-8）将字符串编码为字节数据，然后再进行 Base64 转换。 如果字符串仅包含 ASCII 字符，此时所有字符编码均为单字节，计算过程简单。

下面以字符串 Mari 为例，演示 ASCII 情况的 Base64 编码步骤。

1
Array.from( "Mari" )
2
    .map( item => item.charCodeAt(0) ) // [77, 97, 114, 105]
3
    .map( item => item.toString(2).padStart(8, "0") ) // ["01001101", "01100001", "01110010", "01101001"]
4
    .join( "" ) // "01001101011000010111001001101001"

在得到二进制数据后，Base64 将其按照 6 位一组进行分割，分割后不足 6 位在后面补零。

根据上面得到的结果，分割后得到：

1
010011 010110 000101 110010 011010 010000
2
19     22     5      50     26     16

然后将每一位根据 Base64 编码表进行转换，得到:

1
TWFyaQ

Base64 编码后的字符串长度需要为 4 的倍数，如果不足则需要使用 = 补充，因此对上方的结果作最后补充处理，得到：

1
TWFyaQ==

这就是 Base64 的编码步骤，依次方式反向操作也可以将 Base64 编码的字符串解码为原始数据。

JavaScript 中的操作方法#

JavaScript 提供了 btoa 与 atob 用于 Base64 编解码：

1
btoa( "Mari" ) // "TWFyaQ=="
2
atob( "TWFyaQ==" ) // "Mari"

需要注意：btoa 只能处理 Latin1（ISO-8859-1）字符，即 单字节范围 0–255。 对于 UTF-8 字符（如中文、emoji），由于实际编码需要多字节，直接调用 btoa 会抛出异常。

1
"M".codePointAt( 0 ).toString( 2 ) // "1001101" 单字节字符
2
btoa( "M" ); // "TQ=="
3

4
"茉".codePointAt( 0 ).toString( 2 ) // "10011100100010101" 双字节字符
5
btoa( "茉" ); // Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

因此在现代 JavaScript 中，处理非 ASCII 字符（UTF-8）时，需要先将字符串转换为 UTF-8 字节，此时存在两种常见方式：

1
function base64Encode( str ) {
2
    const bytes = new TextEncoder().encode( str );
3
    let binary = "";
4
    for ( const b of bytes ) binary += String.fromCharCode( b );
5
    return btoa( binary );
6
}
7

8
function base64Decode( str ) {
9
    const binary = atob( str );
10
    const bytes = Uint8Array.from( binary, c => c.charCodeAt( 0 ) );
11
    return new TextDecoder().decode( bytes );
12
}
13

14
base64Encode( "茉莉" ); // "6IyJ6I6J"
15
base64Decode( "6IyJ6I6J" ); // "茉莉"

1
function base64Encode( str ) {
2
    return btoa( encodeURIComponent( str ) );
3
}
4

5
function base64Decode( str ) {
6
    return decodeURIComponent( atob( str ) );
7
}
8

9
base64Encode( "茉莉" ); // "JUU4JThDJTg5JUU4JThFJTg5"
10
base64Decode( "JUU4JThDJTg5JUU4JThFJTg5" ); // "茉莉"