解決 Javascript 中 atob 方法解碼中文字符亂碼問題

轉載自 https://blog.coding.net/blog/resolve-atob-decode-chinese-character-outputting-messy-code-problem-in-javascript

解決 Javascript 中 atob 方法解碼中文字符亂碼問題
由於一些網絡通訊協議的限制,你必須使用 window.btoa() 方法對原數據進行編碼后，才能進行發送。接收方使用相當於 window.atob() 的方法對接受到的 base64 數據進行解碼,得到原數據。例如，發送某些含有 ASCII 碼表中 0 到 31 之間的控制字符的數據。

window.btoa 與 window.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 編碼。

借助 encodeURIComponent 和 decodeURIComponent 轉義非中文字符
由於 btoa 僅支持 ASCII 字符序列，如果通過 encodeURIComponent 將中文字符編碼成ASCII字符序列，再通過 btoa 進行 base64 編碼。

編碼

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

> decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
"中文"
雖然到達了曲線救國的目的，但是由於 encodeURIComponent 和 decodeURIComponent 已經達到了轉義控制字符的目的，使用 atob 和 btoa 感覺是多此一舉。

第三方 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'))
參考閱讀
btoa(), atob() 支援中文的方法
How to encode UTF8 characters into Base64 in JavaScript
window.atob
Best practice: escape, or encodeURI / encodeURIComponent

值得一提的是

某些情況下需要用    
window.btoa(unescape(encodeURIComponent(svg1)));