詳談js對url進行編碼和解碼(三種方式的區別)
今天在專案中發現一個bug,原作者本意是提取url中的某段資訊與一已知資訊進行比較,如果成立則執行相應程式碼。找來找去發現邏輯並沒有問題,但是前段樣式並沒有改變,通過控制檯列印提取出來的結果,發現是一段UTF8加密的文字,最後進行相應的解碼程式碼才生效。
Javascript語言用於編碼的函式,一共有三個,最古老的一個就是escape()
。雖然這個函式現在已經不提倡使用了,但是由於歷史原因,很多地方還在使用它,所以有必要先從它講起。
escape 和 unescape
實際上,escape()
不能直接用於URL編碼,它的真正作用是返回一個字元的Unicode編碼值。比如"春節"的返回結果是%u6625%u8282
它的具體規則是,除了ASCII字母、數字、標點符號"@ * _ + - . /"以外,對其他所有字元進行編碼。在u0000到u00ff之間的符號被轉成%xx的形式,其餘符號被轉成%uxxxx的形式。對應的解碼函式是unescape()
。
還有兩個地方需要注意。
首先,無論網頁的原始編碼是什麼,一旦被Javascript編碼,就都變為unicode字元。也就是說,Javascipt函式的輸入和輸出,預設都是Unicode字元。這一點對下面兩個函式也適用。
其次,escape()
不對"+"編碼。但是我們知道,網頁在提交表單的時候,如果有空格,則會被轉化為+字元。伺服器處理資料的時候,會把+號處理成空格。所以,使用的時候要小心。
例如:
編碼:
escape('http://[email protected]@jie&order=1')
結果:"http%3A//www.baidu.com%3Fname%[email protected]@jie%26order%3D1"
escape('張')
結果:"%u5F20"
解碼:
unescape("http%3A//www.baidu.com%3Fname%[email protected]@jie%26order%3D1")
結果:"http://[email protected]@jie&order=1"
unescape("%u5F20" )
結果:"張"
encodeURI 和 decodeURI
encodeURI()
是Javascript中真正用來對URL編碼的函式。
它著眼於對整個URL進行編碼,因此除了常見的符號以外,對其他一些在網址中有特殊含義的符號"; / ? : @ & = + $ , #
",也不進行編碼。編碼後,它輸出符號的utf-8
形式,並且在每個位元組前加上%
。
它對應的解碼函式是decodeURI()
。
注:需要注意的是,它不對單引號’編碼。
例如:
編碼:
encodeURI('http://[email protected]@jie&order=1')
結果:http://www.baidu.com?name=[email protected]@jie&order=1
解碼:
decodeURI("http%3A//www.baidu.com%3Fname%[email protected]@jie%26order%3D1")
結果:http%3A//www.baidu.com%3Fname%[email protected]@jie%26order%3D1
encodeURIComponent 和 decodeURIComponent
encodeURIComponent() 和 decodeURIComponent()
最後一個Javascript編碼函式是encodeURIComponent()
。與encodeURI()
的區別是,它用於對URL的組成部分進行個別編碼,而不用於對整個URL進行編碼。
因此,"; / ? : @ & = + $ , #
",這些在encodeURI()
中不被編碼的符號,在encodeURIComponent()
中統統會被編碼。至於具體的編碼方法,兩者是一樣。
它對應的解碼函式是decodeURIComponent()
。
例如:
編碼:
encodeURIComponent('http://www.ba[email protected]@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=[email protected]@jie&order=1