JavaScript encodeURI()

admin發表於2019-02-17

此方法可以對URI進行編碼,並返回編碼後的字串,通常為網址進行編碼。

特別說明:之前通常稱網址為URL,當前統一稱作為URI,參閱URI、URL與URN一章節。

如果要深刻的理解此方法,需要掌握如下幾個知識點:

(1).方法對URI哪部分進行編碼。

(2).URI哪些字元需要進行編碼。

(3).URI為什麼要進行編碼。

(4).編碼後的返回值特點。

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

encodeURI方法與encodeURIComponent方法的功能非常類似,具體參閱如下兩篇文章:

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

(2).encodeURI與encodeURIComponent區別一章節。

一.方法對URI哪部分進行編碼:

此方法編碼著眼於整個URI,如果狹隘一點,也就是著眼於整個URL,而不是它的某一部分。

使用此方法對URI編碼後返回的字串依然是有效的URI,不會因為編碼導致失效。

首先看一段程式碼例項直觀感受一下此方法的功能:

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201902/17/005836cze4wfwy9m44366o.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼對URI中的傳遞的值"螞蟻部落"進行了編碼。

二.URI哪些字元需要進行編碼:

此方法著眼於整個網址,並保證網址依然有效,所以不會對構成網址的一些關鍵詞進行編碼。

標準規定,網址中只有字母和數字([0-9a-zA-Z]匹配的字元)和一些特殊的字元可以不經過編碼直接使用。

下面進行一下總結,此方法不會對如下字元進行編碼:

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

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

除了上述列舉的這些字元,所有的字元都會被編碼,並返回對應的字串。

三.URI為什麼要進行編碼:

所謂天生我材必有用,當然設計此方法也不是無的放矢。

正如前面提到,標準規定除去指定的字元,其他字元都必須要編碼。

這是因為,不同的作業系統或者不同的瀏覽器對非上述無需編碼的處理會有所不同,也就是說它們可能會有自己的一套規則,同一個網址可能會產生不同的效果,於是通過此方法對其進行編碼,生成了一個統一的網址,不會因為作業系統或者瀏覽器的不同而產生差異,相當於對URI進行了標準化。

四.編碼後的返回值特點:

此方法會對整個URI進行編碼,除了上文列舉的無需編碼的字元外,其他字元都需要進行編碼。通俗的講,此方法屬於Percent-encoding,也就是說編碼的返回值是以百分號(%)起始,編碼後會輸出對應字元的utf-8形式,然後再在前面加上百分號,看如下程式碼例項:

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201902/17/005916ej69xawr33jjfjrr.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對"螞"進行編碼,規則是,先對其進行utf-8進行編碼,再在utf-8的每個位元組碼前加上一個百分號。於是,"螞"先進行utf-8編碼,變成了三個位元組,分別是0xE8、0x9A和0x82,再在utf-8的每個位元組碼前加上一個百分號,得到結果就是%E8%9A%82。可以使用decodeURI方法對其進行解碼,程式碼例項如下:

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201902/17/005943zjhjzvngpxx8djjg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於decodeURI方法參閱JavaScript decodeURI()一章節。

相關文章