encodeURI與encodeURIComponent區別

標題中兩個方法功能比較類似，都可以對URI進行編碼，並且返回值格式相同。

所以，實際編碼中可能會出現方法應用場景不恰當的現象，從而導致一些錯誤的發生。

特別說明：兩個方法的編碼物件通常是網址，之前稱網址為URL，當前統一稱作為URI。

關於URI與URL更多內容可以參閱URI、URL與URN區別一章節。

方法名字通常會體現各自的功能，注意這一點可能會有助於概念的理解與區分。

只要將兩個方法的概念理解透徹，兩者的區別自然會浮現出來，兩個方法具體用法參閱如下文章：

（1）.JavaScript encodeURIComponent()一章節。

（2）.JavaScript encodeURI()一章節。

為了朋友們變省時省力，下面在通過程式碼例項簡單介紹一下兩個方法的異同。

一.方法的相同點：

（1）.都是對URI進行編碼，防止一些意外情況的發生。

（2）.返回值的格式完全相同。

（3）.都屬於Global 全域性物件。

關於Global 物件更多內容參閱JavaScript Global 物件一章節。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let URI="www.softwhy.com?webName=螞蟻部落";
console.log(encodeURI(URI));
console.log(encodeURIComponent(URI));

程式碼執行效果截圖如下：

可以看到兩個方法對特殊字元的編碼返回值的格式是相同的。

其實從上述編碼結果也可以看出兩個方法確實有差異，否則返回字串就完全相同了。

二.兩個方法的不同：

（1）.針對的目標不同：

先從方法的名稱開始分析encodeURI由單詞encode和URI（縮寫看做一個單詞）構成。

由此，可以有理由猜測，此方法是針對整個URI進行編碼，事實也是如此，目的是為了將URL中的一些特殊字元進行統一化處理，防止在不同的作業系統或者瀏覽器對特殊字元處理的差異化產生的問題，在JavaScript encodeURI()一章節有介紹。

同樣的道理，encodeURIComponent有三個單詞encode、URI和component構成。

那麼可以猜測，此方法用於對URI的組成部分進行編碼，也就是對URI的區域性區域進行編碼，主要針對URI傳值部分進行編碼，以防止由於特殊字元導致歧義的出現，在JavaScript encodeURIComponent()一章節有詳細介紹。

看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let URI="http://www.softwhy.com?webName=螞蟻部落";
console.log(encodeURI(URI));
console.log(encodeURIComponent(URI));

程式碼執行效果截圖如下：

由於encodeURI方法是針對整個URI進行編碼，所以URI中的一些語法關鍵字不能被編碼，要保證整個URI依然是有效可用的，encodeURIComponent主要針對URL的傳值部分進行編碼，如果對整個URl進行編碼，會導致整個URL失效。

（2）.編碼的字元不同：由於兩個方法編碼針對目標的不同，所以方法編碼的字元範圍也有所不同。

encodeURI方法不會編碼如下字元：

（1）.字母和數字（[0-9a-zA-Z]匹配的字元）

（2）.; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

encodeURIComponent方法不會編碼如下字元：

（1）.字母和數字（[0-9a-zA-Z]匹配的字元）

（2）.- _ . ! ~ * ' ( )

三.總結：

由於方法的目的不同，所以出現差異是必然的。

encodeURI既然針對整個URI編碼，那麼就要保證整個URI編碼後依然有效。

encodeURIComponent因為針對傳值，所以對整個URI編碼就不正確的選擇，因為可能導致URI失效。

於是，掌握兩個方法的應用目標與編碼字元的範圍的差別就達到目的了。