一文助你分清encodeURI與encodeURIComponent

幫助你區(qū)別 encodeURI 與 encodeURIComponent 的使用場景

背景

最近在公司做預(yù)覽功能時，遇到對請求參數(shù)進(jìn)行編碼的場景。那么問題來了：

為什么要對鏈接或參數(shù)進(jìn)行編碼？

何時需要編碼？

encodeURI 與 encodeURIComponent 有啥區(qū)別呢？

下面來一起看看吧~

為啥需要編碼

Http 協(xié)議中參數(shù)的傳輸是"key=value"這種鍵值對形式的，如果要傳多個參數(shù)就需要用"&“符號對鍵值對進(jìn)行分割。如”?name1=value1&name2=value2"，這樣在服務(wù)端在收到這種字符串的時候，會用"&“分割出每一個參數(shù)，然后再用”="來分割出參數(shù)值。

URL 是采用 ASCII 字符集進(jìn)行編碼的，根據(jù) RFC3986 “%編碼” 規(guī)范："&“會被編碼為"26”，"=“會被編碼為"3D”。

如果參數(shù)值中包含"=“或”&"這種特殊字符會產(chǎn)生歧義，因為 URL 編碼只是簡單的在特殊字符的各個字節(jié)前加上%，所以需要對參數(shù)進(jìn)行 URL 編碼。

如果需要傳輸?shù)膮?shù)可能包含類似"（!$&’()*+,;=）"這種特殊字符時就需要進(jìn)行編碼了。

下面來看看標(biāo)題所說的兩種編碼方式。

我們注意到兩種方式都包含一個 URI，那么 URI 是啥？

統(tǒng)一資源標(biāo)識符（Uniform Resource Identifier，URI)是一個用于標(biāo)識某一互聯(lián)網(wǎng)資源名稱的字符串。

Web 上可用的每種資源 -HTML 文檔、圖像、視頻片段、程序等 - 由一個通用資源標(biāo)識符（Uniform Resource Identifier, 簡稱"URI"）進(jìn)行定位。

encodeURI

用作對一個完整的 URI 進(jìn)行編碼，不會對網(wǎng)址中的 ASCII 字母和數(shù)字及標(biāo)點符號進(jìn)行編碼。

!#$&’()*+,/:;=?@-._~0-9a-zA-Z 不會被編碼

使用場景：

當(dāng)需要獲取一個可用的 URL 地址時，使用此方法進(jìn)行編碼。

例子：

encodeURI('http://xuedingmiao.com/My first/'); // http://xuedingmiao.com/My%20first/

encodeURIComponent

是對統(tǒng)一資源標(biāo)識符（URI）的組成部分進(jìn)行編碼的方法，從字面意思來看 URIComponent 是 URL 組成部分、組件，所以這個方法是對組成部分進(jìn)行編碼而不是整體。

encodeURIComponent 會假定它的參數(shù)是 URI 的一部分（比如協(xié)議、主機名、路徑或查詢字符串），在 encodeURI 中不被編碼的符號"; / ? : @ & = + $ , #"，encodeURIComponent 都會進(jìn)行編碼。

!’()*-._~0-9a-zA-Z 不會被編碼

使用場景：

當(dāng)需要對 URL 的參數(shù)進(jìn)行編碼時，使用 encodeURIComponent。

例子：

encodeURIComponent('http://xuedingmiao.com/?a=1&b=2'); // "http%3A%2F%2Fxuedingmiao.com%2F%3Fa%3D1%26b%3D2"

區(qū)別總結(jié)

可以看到 encodeURIComponent 編碼的字符范圍比 encodeURI 的大

參考資料

encodeURI(https://www.w3school.com.cn/jsref/jsref_encodeuri.asp)

encodeURIComponent(https://www.w3school.com.cn/js/jsref_encodeURIComponent.asp)

百分比編碼(https://developer.mozilla.org/zh-CN/docs/Glossary/percent-encoding)

TCP/IP

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。