Memento

Appearance

JavaScript中的Base64编码转译 ​

有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。另一个场景是，有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+ 和 / 这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript 原生 Base64 相关方法 ​

  1. btoa()：任意值转为 Base64 编码
  2. atob()：Base64 编码转为原来的值
js
const string = 'Hello World!'
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，这两个方法不适合非 ASCII 码的字符，会报错。

js
btoa('你好') // 报错

非 ASCII 码字符转为 Base64 方法 ​

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

js
// 编码
function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

// 解码
function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

Browser compatibility

More

应用场景 ​

  • 例如在 https://element-plus.run/ 中，element-plus.run/ 后面的乱码，其实就是经过 base64 转译的字符码。

why

将数据使用Base64编码后再传输可以减少字符数。Base64编码是一种将二进制数据转换成ASCII字符的编码方式，每3个字节（24位）对应4个Base64字符（6位），因此可以将原来需要用8位表示一个字节的数据，转换为只需要6位即可表示一个字节的数据。这样就可以缩小数据的体积，从而达到减少传输数据量的目的。