1.? 什么情況下需要編碼 ?

我們要查詢一個年齡為 20，姓名包含?tom?的人，那么我們會這樣去組織請求

var url = "http//xxx/age=20&name=tom"

?然后服務端就能收到下面的接口請求參數

{"age": "20","name": "tom" }

如果我要搜索的姓名是?tom&lucy，那么 url 就變成了

var url = "http//xxx?age=20&name=tom&lucy"

我們預想的結果是

{"age": "20","name": "tom&lucy" }

然而實際上卻是

{"age": "20","name": "tom","lucy": "" }

想必大家也都能理解，這個參數中包含?&，就被當做 URL 本身的參數結構了，關鍵是如何解決這個問題呢？

encodeURI

可能有的同學知道 JavaScript 中有個?encodeURI()?方法用來對 URI 進行編碼。接下來我們試試

encodeURI(url)

得到的是什么結果呢？抱歉，和原 url 一模一樣，沒有任何變化。為什么會這樣呢？

這是因為?encodeURI?強調的是給整個 URL 進行編碼，用特殊的 UTF-8 編碼替換所有無效的字符，從而讓瀏覽器能夠接受和理解。比如

encodeURI('http//xxx?age=20 &name=王二狗&lucy')

編碼后的結果為

"http//xxx?age=20%20&name=%E7%8E%8B%E4%BA%8C%E7%8B%97&lucy"

可以看到，里面的空格和中文都被編碼了，而?&?和?=?并未被編碼。

encodeURIComponent

相比于?encodeURI，encodeURIComponent?則強調對 URL 中的某部分進行徹底編碼，比 encodeURI 編碼的范圍更大，能夠多編碼的字符?@#$&=:/,;?+。

可見??#&?這些本屬于 URL 結構的特殊字符會被?encodeURIComponent?編碼，而不會被?encodeURI?編碼。

所以我們改為用 encodeURIComponent 來解決上面的問題

encodeURIComponent("http//xxx?age=20&name=tom&lucy")

結果是

"http%2F%2Fxxx%3Fage%3D20%26name%3Dtom%26lucy"

放到瀏覽器里面直接不認識，什么情況？請注意，encodeURIComponent 是用在對 URL 的某部分進行編碼，編碼的結果為純粹的字符串，肯定是不能對整個 URL 運用這個方法的。

正確的姿勢是單獨對?name?的值進行編碼

let _name = encodeURIComponent('tom&lucy') let url = 'http//xxx?age=20&name=' + _name

這里?_name?就變成了?tom%26lucy，可見?&?被編碼成了?%26。

這樣就會被接口識別為

{"age": "20","name": "tom&lucy" }

結論

encodeURI?本質上對接口的識別沒有任何影響，僅僅是為了讓 URL 更好看。

encodeURIComponent?則是徹底解決了特殊字符帶來的影響，能夠正確識別參數值中的特殊字符。

escape 同?encodeURIComponent?使用方式差不多, 適合局部編碼

2.? 編碼解碼的三種方法

1、escape 和 unescape (ECMA-262第三版已經廢棄， 不建議使用)

不會被編碼的字符?:?ASCII字母、數字、標點符號 @ ?* ?_ ?+ ?- ?. ?/?

不適合對整個 url 進行編碼 ,, 參數局部編碼

// 編碼 escape('http://www.baidu.com?name=zhang@xiao@jie&order=1&par=張三') // "http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1%26par%3D%u5F20%u4E09"// 解碼 unescape('http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1%26par%3D%u5F20%u4E09') // "http://www.baidu.com?name=zhang@xiao@jie&order=1&par=張三"

2、encodeURI 和?decodeURI

不會被編碼的字符：! @ # $ & * ( ) = : / ; ? + '

// 編碼 encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1&par=張三') // "http://www.baidu.com?name=zhang@xiao@jie&order=1&par=%E5%BC%A0%E4%B8%89"

3、encodeURIComponent 和?decodeURIComponent

全部編碼, 簡單說這種方式編碼最徹底

不適合對整個 url 進行編碼? , 參數局部編碼

encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1&par=張三') // "http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1%26par%3D%E5%BC%A0%E4%B8%89"

?

總結

以上是生活随笔為你收集整理的js 中编码和解码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。