詳談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