使用 JavaScript 进行 Base64 编码与解码

Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64也被一些应用(包括使用MIME的电子邮件)和在XML中储存复杂的数据时使用。 

由于 BASE64 是一种非常常用的编码方案,在开发中经常会使用到,所以当前浏览器标准 API(atob、btoa) 都支持进行 BASE64 操作,遗憾的是上面提到的标准 API 仅支持 ASCII 字符。所以使用范围受限。

1. JS 标准API atob 与 btoa 

PS:仅支持 ASCII 字符串,不能处理中文等

在JavaScript中,有2个函数分别用来处理解码和编码base64 字符串:

atob()  // 解码
btoa()  // 编码

这里的 a 指的是 ASCII 编码,即“美国信息交换标准代码”。b 指的是 Base64 编码。结合 to 这个单词,就很容易知道 atob 与 btoa 这两个函数的作用是干嘛的了。

atob() 函数能够解码通过 base-64 编码的字符串数据。相反地,btoa() 函数能够从二进制数据“字符串”创建一个base-64编码的ASCII 字符串。

Demo 样例:

对 ‘中文’ 二字进行 BASE64 编码为:【5Lit5paHCg==】

在浏览器控制台直接使用 btoa('中文') 进行 base64 编码会报错

在浏览器控制台直接使用 atob('5Lit5paHCg==') 进行 base64 解码会出现乱码

更多详情参考 MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

MDN 中的方案一,虽然实现了能够处理中文,但并不是直接对中文等非 ASCII 字符的原始二进制流进行 BASE64 编码,仅仅是将转义【转义即为:将中文等特殊字符替换为特定 ASCII 字符的组合】之后不过包含非 ASCII 字符的内容进行 BASE64 编码,与直接对原始数据的二进制流进行 BASE64 编码结果是不一样的。所以不适合采用。

2. 正确有效的 BASE64 编码姿势

2.1 使用 Buffer 对象

Buffer 是 Nodejs 中的标准全局对象(即无需导入),可以拿来使用。所以如果你的项目是基于 nodejs 构建的(比如你是使用 vue-cli 创建的 vue 项目),那么你只需一行代码就可以做到。

let base64Str = Buffer.from('Hello 中国!', 'utf-8').toString('base64')    // 编码
console.log('Hello 中国!: ' + base64Str)
let decStr = Buffer.from(base64Str, 'base64').toString('utf8')      // 解码
console.log('解析Base64: ' + decStr)

Buffer 详情参考:http://nodejs.cn/api/buffer.html#buffer_buffers_and_character_encodings

2.1 非 NodeJS 环境解决方案

这时候就要选用第三方已经编译好的库了,这里推荐使用 js-base64:

项目地址:https://github.com/dankogai/js-base64

具体使用项目中已经写的很清楚了,这里就不再啰嗦。

Base64.encode('小飼弾');    // 5bCP6aO85by+
Base64.encodeURI('小飼弾'); // 5bCP6aO85by-

版权声明:本文为gulang03原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。