JavaScript encodeURIComponent()

admin發表於2019-02-18
JavaScript

此方法可以對URI進行編碼，並返回編碼後的字串，與encodeURI方法類似，區別也很明顯。

從方法名稱大致猜測出兩者的主要區別在哪，本文所要介紹的方法針對URI區域性區域編碼。

而encodeURI則是針對整個URI進行編碼，關於兩個方法的更多區別可以參閱如下兩篇文章：

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

（2）.encodeURI與encodeURIComponent區別一章節。

URI是統一資源定位的意思，是Uniform Resource Identifier的縮寫，下面做幾點說明：

（1）.此方法主要針對網址的區域性區域進行編碼。

（2）.之前，網址通常被稱作為URL，當前統一稱作URI。

（3）.當然URI並不特指網址，還可以包括其他的內容。

關於URI和URL的區別和聯絡可以參閱URI、URL與URN一章節。

本文將結合程式碼例項詳細對encodeURIComponent方法進行一下介紹。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
encodeURIComponent(str);

引數解析：

（1）.str：將要被編碼的字串，通常是網站的區域性內容。

此方法屬於Global 全域性物件，具體參閱JavaScript Global 物件一章節。

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

encodeURIComponent方法使用方式很簡單，只有掌握如下幾點知識才能更好的利用：

（1）.此方法主要針對網址哪一部分進行編碼。

（2）.為什麼要對網址的指定區域進行編碼。

（3）.方法會對哪些字元進行編碼。

（4）.編碼返回值的構成。

一.針對網址哪一部分進行編碼：

此方法主要針對網址區域性區域進行編碼，那麼就搞清楚這個區域性區域具體是哪一部分。

以"http://www.softwhy.com?webName=螞蟻部落" ，此方法主要針對網址傳參的部分進行編碼。

也就是說此方法主要為URI的查詢字串部分進行編碼，以免出現一些意想不到的問題，後面會介紹。

看一個程式碼例項：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201902/18/132102p2p8mgfeg2h5z4ms.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到上述程式碼對URI中的查詢字串部分進行了編碼。

這時可能會有朋友會問，為什麼不是用它對整個URI進行編碼，看如下程式碼例項：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201902/18/132140u9wvnv1c7vr0ja22.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果使用此方法對整個URI進行編碼，可以說這個連結已經廢了，完全不能用。

看看URI的協議部分已經被編碼，如果將這個地址寫入位址列肯定不會開啟想要的頁面。

二.為什麼要對網址的指定區域進行編碼：

不少朋友可能會機械式的應用此方法對URI的查詢字串部分進行編碼，但是並不知道為什麼。

首先說明，並不是所有的查詢字串都需要編碼，但是經過編碼會健壯，因為有些傳遞的查詢引數會產生歧義。

下面通過幾個URI傳參進行一下簡單的分析，首先看一個沒有歧義的：

xxx.com?a=1&b=1，這個URI的傳參不會產生任何問題，再來看下面這個：

www.softwhy.com?q=xxx.com?a=1&b=1，現在我們直接把"xxx.com?a=1&b=1"當做q的值進行傳遞。這時候歧義產生了，由於查詢字串是用&分隔的，所以整個q的值會被分隔，q的值實際上變為"xxx.com?a=1"，後面有多了一個b，它的值是1，這在實際專案中問題就大了。

那麼通過encodeURIComponent方法對查詢字串部分進行編碼可以解決此問題。

三.方法會對哪些字元進行編碼：

此方法並不是對所有的字元進行編碼，比如下面這些字元：

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

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

基本上是一個記憶性的東西，就不再多介紹了。

四.編碼返回值的構成：

關於此方法編碼後返回值的構成本文不做介紹，與、encodeURI方法完全一樣。

具體可以參閱JavaScript encodeURI()一章節。

相關文章