解决 Javascript 中 atob 方法解码中文字符乱码问题

由于一些网络通讯协议的限制,你必须使用window.btoa()方法对原数据进行编码后,才能进行发送。接收方使用相当于window.atob()的方法对接受到的base64数据进行解码,得到原数据。例如,发送某些含有ASCII码表中0到31之间的控制字符的数据。

window.btoawindow.atob不支持中文

对于unicode编码的字符进行base64编码之后,通过浏览器原生的btoa方法界面中文会乱码。

在bash终端,将“中文”转成 base64 编码

$ echo 中文 | base64
5Lit5paHCg==

在Chrome console通过window.atob解码,结果为乱码

> window.atob('5Lit5paHCg==')
中文

在Chrome console中执行windows.btoa编码,报错

> window.btoa('中文')
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

从错误提示看,btoa仅支持 ASCII 编码。

借助encodeURIComponentdecodeURIComponent转义非中文字符

由于btoa仅支持ASCII字符序列,如果通过encodeURIComponent将中文字符编码成ASCII字符序列,再通过btoa进行base64编码。

编码

> window.btoa(encodeURIComponent('中文'))
"JUU0JUI4JUFEJUU2JTk2JTg3"

解码

> decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
"中文"

虽然到达了曲线救国的目的,但是由于encodeURIComponentdecodeURIComponent已经达到了转义控制字符的目的,使用atobbtoa感觉是多此一举。

第三方Base64工具

webtoolkit.base64是一个第三方实现的Base64编码工具,完美的支持unicode编码的字符串。

> Base64.encode('中文')
"5Lit5paH"

> Base64.decode('5Lit5paH');
"中文"

另外,如果服务端为Nodejs,可用如下coffee代码进行base64的编码和解码。

btoa: (s)->
    (new Buffer(s, 'utf8')).toString('base64')
atob: (s)->
    (new Buffer(s, 'base64').toString('utf8'))

参考阅读

  1. btoa(), atob() 支援中文的方法
  2. How to encode UTF8 characters into Base64 in JavaScript
  3. window.atob
  4. Best practice: escape, or encodeURI / encodeURIComponent
  5. JavaScript - code