原文地址
转载文章,侵删
场景是这样的, 后台传来经过 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
字符集, 所以粒度的不同并不影响结果.