淺析encodeURI,encodeURIComponent,decodeURI,decodeURIComponent

Global(所有在全域性作用域中定義的屬性和函式，都是Global的屬性)物件的encodeURI(),encodeURIComponent()方法可以對**URI（通用資源識別符號）**進行編碼，以便傳送給瀏覽器。

有效的URI不能包含某些字元：例如空格。這2個URI編碼方法就可以對URI進行編碼，用特殊的UTF8編碼替換所有無效的字元，從而讓瀏覽器能夠接受。

1.encodeURI(),encodeURIComponent()

先看個demo例子：

var uri = 'https://www.baidu.com/s?ie=utf-16&word=hello #index.html';

encodeURI(uri)		//https://www.baidu.com/s?ie=utf-16&word=hello%20#index.html

encodeURIComponent(uri)	//https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3Dutf-16%26word%3Dhello%20%23index.html
複製程式碼

從上面的例子，可以看出： encodeURI()編碼後的結果是：空格被替換成了%20，除了空格之外的任何字元都沒有改變； encodeURIComponent()則是將所有非字母數字字元替換成對應編碼。

encodeURI()可以對整個URI進行使用，而encodeURIComponent()只適用於對附加URI後面的字串使用。

所以一般來說，我們使用更多的的是encodeURIComponent()，因為我們更需要對查詢字串進行編碼，而不是整個URI

2.decodeURI(),decodeURIComponent()

這兩個方法與encodeURI(),encodeURIComponent()對應，其中decodeURI()只能對使用encodeURI()替換的字元進行解碼，decodeURIComponent()能對使用encodeURIComponent()替換的字元進行解碼

var uri = 'https://www.baidu.com/s?ie=utf-16&word=hello%20%24#index.html';

decodeURI(uri)		//https://www.baidu.com/s?ie=utf-16&word=hello %24#index.html

decodeURIComponent(uri)	//https://www.baidu.com/s?ie=utf-16&word=hello $#index.html

複製程式碼

因為uri中有編碼值%20，%24，decodeURI只可以把%20轉化為空格，不會對%24僅從任何處理，因為%24表示$符號，$符號不是使用encodeURI替換的。

而decodeURIComponent可以解釋任何特殊字元的編碼。

我們可以使用decodeURIComponent將URL Search 中的引數轉化為物件，以便我們使用：

var str = 'https://www.sogou.com/sie?ie=utf8&query=%E5%91%B5%E5%91%B5&pid=AQKo5-0000';

var query = str.split('?')[1];

var result = {};

query.split("&").forEach(function(part) {
  var item = part.split("=");
  result[item[0]] = decodeURIComponent(item[1]);
});

console.log(result);

結果：{ie: "utf8", query: "呵呵", pid: "AQKo5-0000"}
複製程式碼

3.escape unescape

ECMAScript v3 已從標準中刪除了 escape unescape函式，並反對使用它，因此應該用 decodeURI() 和 decodeURIComponent() 取而代之。

URI方法能編碼素所有Unicode字元，而 escape unescape只能正確編碼ASCLL字元，可以看下面的demo，編碼結果有點不倫不類，不便於使用：

var str = 'https://www.baidu.com/s?tn=mswin_oem_dg&ie=utf-16&word=hello';
escape(str)		//https%3A//www.baidu.com/s%3Ftn%3Dmswin_oem_dg%26ie%3Dutf-16%26word%3Dhello
複製程式碼