Javascript 中 atob/btoa

 

解決 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'))

from：https://blog.csdn.net/qq_37193537/article/details/89379621