js 轉(zhuǎn)義字符及URI編碼詳解

URL中的轉(zhuǎn)義字符

當(dāng)URL的參數(shù)中出現(xiàn)諸如+，空格，/，?，%，#，&，=等特殊字符串符號時，因為上述字符有特殊含義，導(dǎo)致服務(wù)器端無法正確解析參數(shù)，如何處理？解決辦法：將這些字符轉(zhuǎn)化成服務(wù)器可以識別的字符。

如果要在URL中傳遞特殊符號的原本意義，要對他們進(jìn)行編碼。編碼的格式為：%加字符的ASCII碼(16進(jìn)制)，例如空格的編碼值是"%20"。

URL中特殊符號的用途及普通意義的編碼

HTML中的轉(zhuǎn)義字符

轉(zhuǎn)義字符串(Escape Sequence)也稱字符實體(Character Entity)。在HTML中，“<”和“>”符號用來表示HTML標(biāo)簽，不能當(dāng)作普通的符號來使用。如果要在HTML文檔中使用這些特殊符號原有的意義，就需要定義對應(yīng)的轉(zhuǎn)義字符串。當(dāng)瀏覽器遇到這類轉(zhuǎn)義字符時就會解釋為真實的字符而不是特殊用途。另外有些字符在ASCII字符集中沒有文字代號，只能用轉(zhuǎn)義字符串來表示，如回車換行符，退格鍵等。

JavaScript中的轉(zhuǎn)義

JavaScript 中有些字符有特殊用途，如果字符串中想使用這些字符原來的含義，需要使用反斜杠對這些特殊符號進(jìn)行轉(zhuǎn)義。

正則中也有需要轉(zhuǎn)義的字符：* . ? + $ ^ [ ] ( ) { } | \ /，也是通過\反斜杠進(jìn)行轉(zhuǎn)義。但是中括號里并不是元字符，不需要轉(zhuǎn)義。

在js中字符串形式的正則表達(dá)式匹配一個反斜杠要用四個反斜杠'\\\\'， 第一個斜杠是js字符串的轉(zhuǎn)義符，第二個斜杠是斜杠本身，第三個斜杠是js字符串的轉(zhuǎn)義符，第四個斜杠是斜杠本身。將第二、四個反斜杠轉(zhuǎn)為正則中的斜杠后，前面一個為正則中的轉(zhuǎn)義符，將后者變?yōu)槠胀ǚ?。字符串形式的正則表達(dá)式里的斜杠也是特殊符號，若要當(dāng)普通符號使用，也需要轉(zhuǎn)義，用“\\”標(biāo)示。因為js中反斜扛為特殊符號（轉(zhuǎn)義字符），js字符串里面表示斜杠需要一次轉(zhuǎn)義：“\\”。

在比如：字面量形式/\{.*\}/---->字符串形式'\\{.*\\}'。因為{號為正則中的特殊符號，需要加\轉(zhuǎn)義，而字符串中的\又是js中的特殊符號，需要再加一個\進(jìn)行轉(zhuǎn)義。

注意正則的字面量形式只需要對正則中的特殊符號轉(zhuǎn)義，不需要對js的特殊符號轉(zhuǎn)義。

js中對字符串進(jìn)行編碼的方法

1.encodeURI()把字符串作為 URI整體進(jìn)行編碼，所以URI組件中的特殊分隔符號（;/:@&=+$?#），encodeURI() 函數(shù)不會進(jìn)行轉(zhuǎn)義。該方法不會對 ASCII 字母和數(shù)字進(jìn)行編碼，也不會對這些 ASCII 標(biāo)點符號進(jìn)行編碼： - _ . ! ~ * ' ( )

　　encodeURI("http://www.w3school.com.cn")

　　輸出http://www.w3school.com.cn

2.encodeURIComponent()把字符串作為 URI 組件的一部分（如path/query/fragment等）進(jìn)行編碼，所以用于分隔 URI 各個部分的特殊分隔符號（;/?:@&=+$,#）也會被轉(zhuǎn)義。返回值中某些字符將被十六進(jìn)制的轉(zhuǎn)義序列替換。該方法也不會對 ASCII 字母和數(shù)字進(jìn)行編碼，也不會對這些 ASCII 標(biāo)點符號進(jìn)行編碼： - _ . ! ~ * ' ( )

　　encodeURIComponent("http://www.w3school.com.cn")

　　輸出http%3A%2F%2Fwww.w3school.com.cn

3.decodeURI()/decodeURIComponent()解碼URI中被轉(zhuǎn)義的字符

　　decodeURIComponent(%E4%BD%A0%E5%A5%BDjavascript);

　　輸出你好javascript

4.escape()用于對字符串進(jìn)行編碼，并返回編碼字符串。但目前已不推薦使用該函數(shù)對URI進(jìn)行編碼。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持億速云！