jsによるurlの符号化と復号化(3つの方式の違い)について詳しく述べる
5006 ワード
今日、プロジェクトでバグが見つかりました.原作者はurlのあるセグメントの情報を既知の情報と比較し、成立すれば対応するコードを実行することを目的としています.探してみるとロジックは問題ありませんが、前段のスタイルは変わりません.コンソール印刷で抽出した結果、UTF 8暗号化された文字であることがわかり、最後に対応する復号コードが有効になります.
Javascript言語で符号化される関数は、全部で3つあり、最古の1つは
Escapeとunescape
Javascript言語で符号化される関数は、全部で3つあり、最古の1つは
escape()
です.この関数は今では提唱されていませんが、歴史的な理由で多くの場所で使われているので、まずそれから話す必要があります.Escapeとunescape
実際には、escape()
はURL符号化に直接使用することはできません.その本当の役割は、1文字のUnicode符号化値を返すことです.例えば「春節」の戻り結果は%u6625%u8282
、つまりUnicode文字セットでは「春」が6625文字目(16進)文字、「節」が8282文字目(16進)文字となっている.
具体的なルールは、ASCIIアルファベット、数字、句読点「@*+-./」以外のすべての文字を符号化することです.u 0000からu 00 ffの間の記号は%xxの形式に変換され、残りの記号は%uxxxxの形式に変換される.対応する復号関数はunescape()
である.
あと2つ注意が必要です.
まず、ウェブページの元の符号化が何であれ、Javascriptに符号化されるとunicode文字になります.すなわち,Javascipt関数の入出力は,デフォルトでUnicode文字である.この点は次の2つの関数にも適用されます.
次に、escape()
は「+」符号化されない.しかし、Webページはフォームをコミットするときにスペースがあれば+文字に変換されることがわかります.サーバがデータを処理するとき、+番号をスペースに処理します.だから、使うときは気をつけて.
例: :
escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"
escape(' ')
:"%u5F20"
:
unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
:"http://www.baidu.com?name=zhang@xiao@jie&order=1"
unescape("%u5F20")
:" "
EncodeURIとdecodeURI encodeURI()
は、Javascriptで実際にURLを符号化するために使用される関数です.
URL全体を符号化することに着目しているため、一般的な記号のほかに、URLに特殊な意味を持つ記号「; / ? : @ & = + $ , #
」も符号化されていない.符号化後、シンボルのutf-8
形式が出力され、各バイトの前に%
が加算される.
それに対応する復号関数はdecodeURI()
である.
注意:単一引用符'は符号化されていません.
例: :
encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1')
:http://www.baidu.com?name=zhang@xiao@jie&order=1
:
decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
:http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1
encodeURIComponent decodeURIComponent
EncodeURIComponent()とdecodeURIComponent()
最後のJavascript符号化関数はencodeURIComponent()
です.encodeURI()
とは異なり、URL全体を符号化するのではなく、URLの構成要素を個別に符号化するために使用される.
したがって、「; / ? : @ & = + $ , #
」は、encodeURI()
において符号化されていない記号であり、encodeURIComponent()
において全て符号化される.具体的な符号化方法については、両者は同じである.
それに対応する復号関数はdecodeURIComponent()
である.
例: :
encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
:"http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"
:
decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
http://www.baidu.com?name=zhang@xiao@jie&order=1
:
escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"
escape(' ')
:"%u5F20"
:
unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
:"http://www.baidu.com?name=zhang@xiao@jie&order=1"
unescape("%u5F20")
:" "
encodeURI()
は、Javascriptで実際にURLを符号化するために使用される関数です.URL全体を符号化することに着目しているため、一般的な記号のほかに、URLに特殊な意味を持つ記号「
; / ? : @ & = + $ , #
」も符号化されていない.符号化後、シンボルのutf-8
形式が出力され、各バイトの前に%
が加算される.それに対応する復号関数は
decodeURI()
である.注意:単一引用符'は符号化されていません.
例:
:
encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1')
:http://www.baidu.com?name=zhang@xiao@jie&order=1
:
decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
:http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1
encodeURIComponent decodeURIComponent
EncodeURIComponent()とdecodeURIComponent()
最後のJavascript符号化関数はencodeURIComponent()
です.encodeURI()
とは異なり、URL全体を符号化するのではなく、URLの構成要素を個別に符号化するために使用される.
したがって、「; / ? : @ & = + $ , #
」は、encodeURI()
において符号化されていない記号であり、encodeURIComponent()
において全て符号化される.具体的な符号化方法については、両者は同じである.
それに対応する復号関数はdecodeURIComponent()
である.
例: :
encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
:"http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"
:
decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
http://www.baidu.com?name=zhang@xiao@jie&order=1
:
encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
:"http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"
:
decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
http://www.baidu.com?name=zhang@xiao@jie&order=1