js 黑魔法之使用 atob 解码 utf-8 字符

原文地址
转载文章，侵删

场景是这样的, 后台传来经过 base64 编码的字符串(原始字符串含有中文), 需要在前端进行解码, 但 js 中的 atob 解码方法不支持 unicode 字符集( btoa 也是), 换言之, 中文被解码出来是会乱码的, 那怎么办呢? 此时就要用到今天介绍的黑魔法了.

黑魔法

// 使用utf-8字符集进行base64编码
function utoa(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}
// 使用utf-8字符集解析base64字符串 
function atou(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

则我只需要调用 atou 函数, 即可解析后台传来的含有中文的 base64 编码字符串了

分析atou

其实上述方法在 MDN 中已有介绍, 但却没有讲明原理, 下面将分析要点

先来分析 atou 函数

其实该函数的关键是做了一个拉丁字符到 utf-8 字符的转换.

为什么这么说呢? 因为 atob 函数使用的是拉丁字符集, 而 decodeURIComponent 使用的是 utf-8 字符集

此时调用 escape 函数, 则会对拉丁字符集文本进行百分号编码(percent-encoding), 简单来说就是非 ASCII 字符如 È (拉丁字符, 上面有个点的 E), 它的在字符集中对应的十六进制字节为 0xC8 , 则其百分号编码为 %C8, ASCII 字符如 [0-9a-z] 则不需要转换

最后再调用 decodeURIComponent 函数, 它会将百分号编码的字符串解析成 utf-8 字符集的字符串, 则 window.atob 返回的拉丁文就变成 unicode 文字了, 中文也就可以显示出来了

这样讲可能有点难懂, 下面举个简单的例子

例子

以中文人字为例, 其对应的 base64 编码为 5Lq6

首先对其解码 window.atob('5Lq6') 的结果为拉丁字符串 人
使用 escape 对拉丁字符串进行百分号编码, 也可以理解成把字符串翻译成拉丁字符集中对应的十六进制符号, escape('人') 结果为 %E4%BA%BA
使用 decodeURIComponent 解析百分号编码字符串, 相当于把十六进制符号翻译成 utf-8 字符集中对应的字符, decodeURIComponent('%E4%BA%BA') 结果为 人, 则原始的中文字就被正确的解析出来了!

分析utoa

因为 atou 要用到 escape 以及 decodeURIComponent 函数, 则很容易理解 utoa 要用与之相对应的 unescape 以及 encodeURIComponent 函数.

但其实事情可以有点微妙的变化.

如果 base64 的编码与解析全是由自己控制的, 且代码仅在 js 环境下运行, 那么可以不需要 escape/unescape 函数, utoa 方法可以改写为

function utoa(str) {
  return btoa(encodeURIComponent(str))
}

因为 encodeURIComponent 函数是使用 utf-8 字符集的, 输出的结果是字符串对应的百分号编码, 而百分号编码是在 ASCII 码范围内, btoa 函数当然可以识别, 则上面的写法也是可行的

只不过它有一个明显的缺点, 那就是这样编码出来的字符串变长了

提问

如何评价上述黑魔法?
我认为这种方法的优点是, 使用的全是 js 内置的函数, 不需要借助第三类库, 对于有洁癖的同学来说(比如说我), 更容易接受.

缺点的话, 可能是使用了 escape/unescape 函数, 这两个函数不被标准推荐使用, 不过我认为那是针对 UR I进行编码解码的场景, 这里 escape/unescape 并不用于 URI 的编码与解码, 并没有用错地方. 只不过因为不鼓励使用, 未来有可能不被浏览器实现, 但我觉得浏览器开发商为了兼容性, 短时间内并不会这样做

是否可以使用 encodeURI/decodeURI 函数?
答案是可以的. 简单来说, encodeURI 与 encodeURIComponent 的区别在于, 后者编码得彻底, 也即 URI 符号的编码粒度更细. 比如 URI 中常见的符号 =, encodeURI('=') 的结果是 =, 而 encodeURIComponent('=') 的结果是 %3D , encodeURI/decodeURI 函数同样使用的是 utf-8 字符集, 所以粒度的不同并不影响结果.