js 轉(zhuǎn)義字符及URI編碼詳解
URL中的轉(zhuǎn)義字符
當(dāng)URL的參數(shù)中出現(xiàn)諸如+，空格，/，?，%，#，&，=等特殊字符串符號時(shí)，因?yàn)樯鲜鲎址刑厥夂x，導(dǎo)致服務(wù)器端無法正確解析參數(shù)，如何處理？解決辦法：將這些字符轉(zhuǎn)化成服務(wù)器可以識別的字符。
如果要在URL中傳遞特殊符號的原本意義，要對他們進(jìn)行編碼。編碼的格式為：%加字符的ASCII碼(16進(jìn)制)，例如空格的編碼值是"%20"。
URL中特殊符號的用途及普通意義的編碼
|
+ |
URL 中+號表示空格 |
%2B |
|
空格 |
URL中的空格可以用+號或者編碼 |
%20 |
|
/ |
分隔目錄和子目錄 |
%2F |
|
? |
分隔實(shí)際的URL和參數(shù) |
%3F |
|
% |
指定特殊字符 |
%25 |
|
# |
表示書簽 |
%23 |
|
& |
URL 中指定的參數(shù)間的分隔符 |
%26 |
|
= |
URL 中指定參數(shù)的值 |
%3D |
HTML中的轉(zhuǎn)義字符
轉(zhuǎn)義字符串(Escape Sequence)也稱字符實(shí)體(Character Entity)。在HTML中，“<”和“>”符號用來表示HTML標(biāo)簽，不能當(dāng)作普通的符號來使用。如果要在HTML文檔中使用這些特殊符號原有的意義，就需要定義對應(yīng)的轉(zhuǎn)義字符串。當(dāng)瀏覽器遇到這類轉(zhuǎn)義字符時(shí)就會(huì)解釋為真實(shí)的字符而不是特殊用途。另外有些字符在ASCII字符集中沒有文字代號，只能用轉(zhuǎn)義字符串來表示，如回車換行符，退格鍵等。
|
字符 |
十進(jìn)制 |
轉(zhuǎn)義字符 |
|
" |
" |
" |
|
& |
& |
& |
|
< |
< |
< |
|
> |
> |
> |
|
不斷開空格(non-breaking space) |
  |
|
JavaScript中的轉(zhuǎn)義
JavaScript 中有些字符有特殊用途，如果字符串中想使用這些字符原來的含義，需要使用反斜杠對這些特殊符號進(jìn)行轉(zhuǎn)義。
正則中也有需要轉(zhuǎn)義的字符：* . ? + $ ^ [ ] ( ) { } | \ /，也是通過\反斜杠進(jìn)行轉(zhuǎn)義。但是中括號里并不是元字符，不需要轉(zhuǎn)義。
在js中字符串形式的正則表達(dá)式匹配一個(gè)反斜杠要用四個(gè)反斜杠'\\\\'， 第一個(gè)斜杠是js字符串的轉(zhuǎn)義符，第二個(gè)斜杠是斜杠本身，第三個(gè)斜杠是js字符串的轉(zhuǎn)義符，第四個(gè)斜杠是斜杠本身。將第二、四個(gè)反斜杠轉(zhuǎn)為正則中的斜杠后，前面一個(gè)為正則中的轉(zhuǎn)義符，將后者變?yōu)槠胀ǚ?。字符串形式的正則表達(dá)式里的斜杠也是特殊符號，若要當(dāng)普通符號使用，也需要轉(zhuǎn)義，用“\\”標(biāo)示。因?yàn)閖s中反斜扛為特殊符號（轉(zhuǎn)義字符），js字符串里面表示斜杠需要一次轉(zhuǎn)義：“\\”。
在比如：字面量形式/\{.*\}/---->字符串形式'\\{.*\\}'。因?yàn)閧號為正則中的特殊符號，需要加\轉(zhuǎn)義，而字符串中的\又是js中的特殊符號，需要再加一個(gè)\進(jìn)行轉(zhuǎn)義。
注意正則的字面量形式只需要對正則中的特殊符號轉(zhuǎn)義，不需要對js的特殊符號轉(zhuǎn)義。
|
代碼 |
輸出的普通字符 |
|
\' |
單引號 |
|
\" |
雙引號 |
|
\& |
和號 |
|
\\ |
反斜杠 |
|
\n |
換行符 |
|
\r |
回車符 |
|
\t |
制表符 |
|
\b |
退格符 |
|
\f |
換頁符 |
js中對字符串進(jìn)行編碼的方法
1.encodeURI()把字符串作為 URI整體進(jìn)行編碼，所以URI組件中的特殊分隔符號（;/:@&=+$?#），encodeURI() 函數(shù)不會(huì)進(jìn)行轉(zhuǎn)義。該方法不會(huì)對 ASCII 字母和數(shù)字進(jìn)行編碼，也不會(huì)對這些 ASCII 標(biāo)點(diǎn)符號進(jìn)行編碼： - _ . ! ~ * ' ( )
encodeURI("
2.encodeURIComponent()把字符串作為 URI 組件的一部分（如path/query/fragment等）進(jìn)行編碼，所以用于分隔 URI 各個(gè)部分的特殊分隔符號（;/?:@&=+$,#）也會(huì)被轉(zhuǎn)義。返回值中某些字符將被十六進(jìn)制的轉(zhuǎn)義序列替換。該方法也不會(huì)對 ASCII 字母和數(shù)字進(jìn)行編碼，也不會(huì)對這些 ASCII 標(biāo)點(diǎn)符號進(jìn)行編碼： - _ . ! ~ * ' ( ) encodeURIComponent("
輸出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í)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
學(xué)好js，這些js函數(shù)概念一定要知道【推薦】
本文主要介紹了一些js函數(shù)概念，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了js控制多圖左右滾動(dòng)切換效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了JS彈出對話框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了三種方式,包括alert、confirm及prompt,非常簡單實(shí)用,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript的查詢機(jī)制LHS和RHS解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了JavaScript 作用域的相關(guān)資料，文中講解非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
HTML元素拖拽功能實(shí)現(xiàn)的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于HTML元素拖拽功能實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了javascript的this關(guān)鍵字的用法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識別對比,此文主要通過小程序?qū)崿F(xiàn)對比人臉相似度，并返回相似度分值，可以基于分值判斷是否為同一人，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JavaScript原型繼承和原型鏈原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)留言板案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03