Javascriptにおけるatobメソッドの中国語文字文字文字文字乱符号化の復号化問題の解決

転載先:http://blog.sqrtthree.com/2015/08/29/utf8-to-b64/
まず、なぜコードするのですか?
いくつかのネットワーク通信プロトコルの制限、または情報暗号化の目的のために、元の情報をbase 64符号化に変換して伝送する必要があります.例えば、ASCII符号表の0から31の間の制御文字を含むデータを送信します.
通常の方法は  window.btoa()  メソッドソースデータを符号化し、受信者が使用する  window.atob()  方法はこれを復号して、元のデータを得る.
Windows.btoaとwindow.atobは中国語をサポートしていません
しかし、この方法に問題があるのはwindow.btoa()です. 中国語はサポートされていません.  window.atob()中国語を含むbase 64コードを変換すると、中国語の部分が文字化けしてしまいます.詳細は以下の通りです.
我々はbash端末の下でまず『中国語』という2文字のbase 64符号化を得る

1
2

$ echo    | base64
5Lit5paHCg==

そしてChrome consoleで  window.atob  復号を行い、結果は以下の通りです.

1
2
3

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

Chrome consoleで実行し続けます  window.btoa  コード、結果が間違っています.

1
2

> 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符号化のみをサポートしており、中国語を変換する際には、まず中国語をASCII文字シーケンスに変換し、btoaによってbase 64符号化を行い、『曲線救国』を実現する必要がある.
ASCII文字シーケンスを変換する方法  encodeURIComponent  および  decodeURIComponent  この2つの方法は完成した.
エンコーディング:

1
2

> window.btoa(encodeURIComponent('  '))
< "JUU0JUI4JUFEJUU2JTk2JTg3"

デコード:

1
2

> decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
< "  "

GitHub APIはREADMEの中国語の文字化けしの問題を取得します
しかし、githubのreadmeデータを上記の復号方式で復号する際は依然として乱符号化されており、Base 64の符号化と復号転送の最適なスキームは以下の通りであることが、関連資料を検索することによって発見された.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function utf8_to_b64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

// Usage:
utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"

utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"

以上の方法でgithubのデータを解析したところ、中国語が正常に表示されていることがわかりました.githubもこの案を採用していることが明らかになりました.
参考資料
https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa