Webフロントエンドでは、Base 64もこのように実現することができる.

5922 ワード
Base 64符号化Base 64のJavaScriptを実現しました.
上記の関連記事の中にBase 64のJavaScriptが実現されています.この文章はこれとは違っていますが、それらは全く違った実現方法です.本编は解说の上で更に优れています.基础知识についてもっと详しく说明しています.
btoaとatoo
btoaの方法btoaはBinary To ASCIIの略字で、バイナリデータを符号化してBase 64符号化されたASCII文字列に変換するという意味です.btoa(str)方法は、ブラウザ内のグローバル(トップレベル)方法である.
atooメソッドbtoaとは対照的に、atobはASCII To Binaryの簡略化であり、Base 64フォーマットのASCII文字列をBase 64で復号し、元のデータを得るという意味である.atobは、btoa方法の逆プロセスであり、ブラウザ内の大域的な方法でもある.
万事めでたく
ブラウザの元のJavaScriptメソッド(btoa及びatob)を使用して、文字列とバイナリデータをBase 64の符号化と復号することが完全にできました.ここを見たら、この文章は終わりだと思いますか?実はまだ始まったばかりです.原理は、btoaにパラメータとして中国語文字列を渡すと、次のコードセグメントに示すようなエラーが発生するからです.
> btoa("     ");
< VM197:1 Uncaught DOMException: Failed to execute 'btoa' on 'Window': 
The string to be encoded contains characters outside of the Latin1 range.(…)
なぜ間違えたというのですか?
The string to be encoded contains characters out side of the Latin 1 range.符号化された文字列はLatin 1の範囲以外の文字を含む.
Latin 1は何ですか?
ISO/IEC 8859-1はLatin-1または「西欧言語」とも呼ばれ、国際標準化組織内のISO/IEC 8859の最初の8文字セットです.ASCIIをベースに、空欄の0 xA 0-0 xFFの範囲に96文字と記号を入れて、変音記号を使用するラテン語で使用することができます.
分かりましたよね.btoaは一バイト幅の文字しか変換できません.つまり、Latin 1文字セットです.中国語の漢字は2つ以上のバイトを占めるように符号化されています.btoa方法では中国語を操作できないので、上記のエラーを報告しました.
カーブ救国の第一歩
まず、曲線救国の第一歩を紹介します.encodeURI、encodeURIComponent、decodeURIとdecodeURIComponentの四つの方法を紹介します.それらは文字列をURI符号化して復号したもので、転じともいう.それぞれ彼らを紹介します.
エンコーディング方法
以下はw 3 cshoolのサイトでencodeURIの方法を紹介します.
この方法はASCII文字と数字を符号化しないし、ASCII句読点も符号化しない.()この方法はURIを完全に符号化することを目的としており、URIには以下のような特別な意味を持つASCII句読点に対して、エンコーディング()関数は転送されません.
上記で説明したように、変換されない文字に加えて、URIの他の文字(中国語の文字など)は全て転送されます.下のコードセグメントを見てください.
> encodeURI("http://www.ibestcode.com/?name=   ");
< "http://www.ibestcode.com/?name=%E4%BB%B5%E5%A3%AB%E6%9D%B0"
エンコーディング方法
やはりw 3 cshoolのウェブサイトの上で上の紹介を引用します.
この方法はASCII文字と数字を符号化しないし、ASCII句読点も符号化しない.()他の文字(例:;/?:@@=+、葏などのURIコンポーネントを区切るための句読点)は、1つまたは複数の16進数の変換シーケンスによって置き換えられます.
上記の説明では、意味のない文字を明確に説明したほか、URIの他の文字(中国語文字やASCIIの「;/?」:@&=+米ドル、㌟など)は全部意味が変わります.下のコードセグメントを見てください.
> encodeURIComponent("http://www.ibestcode.com/?name=   ");
< "http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D%E4%BB%B5%E5%A3%AB%E6%9D%B0"
比較すると、エンコーデURIComponentはエンコーディングに比べて、URIに特殊な意味を持つ文字を多く変換していることが分かります.
decodeURIとdecodeURIComponentdecodeURIはencodeURIの逆プロセスであり、decodeURIComponentはencodeURIComponentの逆プロセスであることが分かります.ここでは多く紹介しません.下記のコードセグメントをご覧ください.
> decodeURI("http://www.ibestcode.com/?name=%E4%BB%B5%E5%A3%AB%E6%9D%B0");
< "http://www.ibestcode.com/?name=   "

> decodeURI("http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D%E4%BB%B5%E5%A3%AB%E6%9D%B0");
< "http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D   "

> decodeURIComponent("http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D%E4%BB%B5%E5%A3%AB%E6%9D%B0");
< "http://www.ibestcode.com/?name=   "

> decodeURIComponent("http://www.ibestcode.com/?name=%E4%BB%B5%E5%A3%AB%E6%9D%B0");
< "http://www.ibestcode.com/?name=   "
転義則
上記のいくつかのコードの中から、文字列「亣士傑」の変換後に対応するのは「%E 4%BB%B 5%E 5%A 3%AB% E 6%9 D%B 0」です.文字「/」の変換後の対応は「%3 A%2 F%2 F」です.変換のルールは、文字のutf-8を16進数で符号化して表示し、各バイト(8 bits=2個の16進数桁)の前に文字「%」を加算することです.興味がある人は自分で確認してみてもいいです.
まとめてみますbtoa方法のパラメータには中国語がありません.encodeURIおよびencodeURIComponentは中国語を変換してもよく、変換後のすべての文字はASCIIコード文字です.このようにencodeURIまたはencodeURIComponentで変換された文字列をbtoaの関数で操作すればいいですか?もちろんこのようにすれば、エラーはないですが、最終的に得られた文字列の適用性は強くないです.これは単純なBase 64符号化ではなく、まずencodeURIを変換してからBase 64符号化の結果です.元の文字列を得るには、Base 64の復号を先に行い、デコードを2段階行う必要があります.
柳暗花明escapeとunescape
エスケープの方法
同じくW 3 CSchol上の紹介を引用します.
この方法はASCII文字と数字を符号化しないし、次のASCII句読点も符号化しない.他のすべての文字は変換シーケンスに置き換えられます.escape方法は、文字列(バイナリストリングではない文字列)を受け入れ、文字コードによって占有されるバイト数によって異なる方法で符号化を表示する.次の例を見てください.
> escape(":%?")
< "%3A%25%3F"
> escape("   ")
< "%u4EF5%u58EB%u6770"
何か得策があるか?読んでなくても大丈夫です.ここで説明します.escapeの目にはすべての文字がユニックコードであり、会った文字がユニックコードで一バイトしかない場合(実はLatin 1文字セットの部分です.ここで説明します.Uniode文字セットはLatin 1文字セットのスーパーセットです.)、「%」＋Unicode符号化値の16進数で符号化されます.":"は"%3 A"と符号化されます.会った文字はUnicodeコードが2バイトを占める場合、「%u」＋ユニックコードの16進数表記で符号化されます.例えば、「亣」は「%u 4 EF 5」と符号化されています.興味のある学生は自分でUnicodeコード表を調べて検証してもいいです.三、四バイトの状況についてはここで議論しません.興味のある学生は自分で掘り下げてもいいです.
unescapeの方法unescape方法で実行される操作は、escape方法の逆プロセスであり、彼はすべての「%XX」(XXは二桁の十六進数値)をユニックodeの一文字の省エネ表現の部分(つまり、Latin 1文字の集中した文字)に変換します.unescape関数はトップクラスのJavaScript関数で、どのオブジェクトとも関連していません.
満タン拡大招
以上を総合して、encodeURIとencodeURIComponentは漢字などをUTF-8符号に変換して、バイトごとに変換して「%XX」(XXは二桁の十六進値)のような串を得ることが分かります.unescapeはすべての「%XX」(XXは16進数の2桁)の列をLatin 1文字セットに復号することができます.btoaメソッドは、ちょうどLatin 1文字セットの文字をBase 64符号に変換することができる.したがって、以下のコードセグメントが生成される.
function utf8ToBase64(str){
  return btoa(unescape(encodeURIComponent(str)));
}
復号プロセスは編集プロセスの逆プロセスであり、次のコードが得られます.
function base64ToUtf8(str){
  return decodeURIComponent(escape(atob(str)));
}
前に送った文章Base 64のJavaScriptが書いたようにBase 64のオブジェクトにパッケージされると、次のコードが得られます.
!function(W){
  W.Base64 = {
     utf8ToBase64:function (str){
       return btoa(unescape(encodeURIComponent(str)));
     },
     base64ToUtf8: function(str){
        return decodeURIComponent(escape(atob(str)));
      }
  }
}(window);

//       

> Base64.utf8ToBase64("   ")
< "5Lu15aOr5p2w"

> Base64.base64ToUtf8("5Lu15aOr5p2w")
< "   "
打ち上げ
関連記事
ステップBase 64符号化Base 64のJavaScriptを実現しました.
JavaScriptとObjective-cは相互作用します.