一文助你厘清encodeURI與encodeURIComponent

背景

最近在公司做預覽功能時，遇到對請求參數進行編碼的場景。那麼問題來了：

• 為什麼要對連結或參數進行編碼？
• 何時需要編碼？
• encodeURI 與 encodeURIComponent 有啥差別呢？

下面來一起看看吧~

為啥需要編碼

Http 協定中參數的傳輸是"key=value"這種鍵值對形式的，如果要傳多個參數就需要用"&"符号對鍵值對進行分割。如"?name1=value1&name2=value2"，這樣在服務端在收到這種字元串的時候，會用"&"分割出每一個參數，然後再用"="來分割出參數值。

URL 是采用 ASCII 字元集進行編碼的，根據 RFC3986 "%編碼" 規範："&"會被編碼為"26"，"="會被編碼為"3D"。

如果參數值中包含"="或"&"這種特殊字元會産生歧義，因為 URL 編碼隻是簡單的在特殊字元的各個位元組前加上%，是以需要對參數進行 URL 編碼。

如果需要傳輸的參數可能包含類似"（!$&'()*+,;=）"這種特殊字元時就需要進行編碼了。

下面來看看标題所說的兩種編碼方式。

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

統一資源辨別符（Uniform Resource Identifier，URI)是一個用于辨別某一網際網路資源名稱的字元串。

Web 上可用的每種資源 -HTML 文檔、圖像、視訊片段、程式等 - 由一個通用資源辨別符（Uniform Resource Identifier, 簡稱"URI"）進行定位。

encodeURI

用作對一個完整的 URI 進行編碼，不會對網址中的 ASCII 字母和數字及标點符号進行編碼。

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

使用場景：

當需要擷取一個可用的 URL 位址時，使用此方法進行編碼。

例子：

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

encodeURIComponent

是對統一資源辨別符（URI）的組成部分進行編碼的方法，從字面意思來看

URIComponent

是 URL 組成部分、元件，是以這個方法是對組成部分進行編碼而不是整體。

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

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

當需要對 URL 的參數進行編碼時，使用 encodeURIComponent。

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

差別總結

編碼方式	适用場景	安全字元
	對完整 URI 編碼	82 個：!#$&'()*+,/:;=?@-.\_~0-9a-zA-Z
	對 URI 元件編碼	71 個：!'()*-.\_~0-9a-zA-Z

• 可以看到 encodeURIComponent 編碼的字元範圍比 encodeURI 的大

參考資料

• 百分比編碼