【JS 編碼測試】

1、前言

講這3個方法區別的文章太多了，可是大部分寫的都很繞。本文試圖從實踐角度去講這3個方法。

 

2、escape和它們不是同一類

簡單來講，escape是對字符串(string)進行編碼(而另外兩種是對URL)，做用是讓它們在全部電腦上可讀。
編碼以後的效果是%XX或者%uXXXX這種形式。
其中 ASCII字母、數字、@*/+ ，這幾個字符不會被編碼，其他的都會。
最關鍵的是，當你須要對URL編碼時，請忘記這個方法，這個方法是針對字符串使用的，不適用於URL。
事實上，這個方法我尚未在實際工做中用到過，因此就很少講了。

 

3、最經常使用的encodeURI和encodeURIComponent

對URL編碼是常見的事，因此這兩個方法應該是實際中要特別注意的。

它們都是編碼URL，惟一區別就是編碼的字符範圍，其中

encodeURI方法 不會對下列字符編碼  ASCII字母、數字、~!@#$&*()=:/,;?+'

encodeURIComponent方法 不會對下列字符編碼 ASCII字母、數字、~!*()'

因此encodeURIComponent比encodeURI編碼的範圍更大。

實際例子來講，encodeURIComponent會把 http://  編碼成  http%3A%2F%2F 而encodeURI卻不會。

 

 

4、最重要的，我該什麼場合用什麼方法

區別上面說的很清楚了，接下來從實際例子來講說把。

　　　 

一、若是隻是編碼字符串，不和URL有半毛錢關係，那麼用escape。

 

二、若是你須要編碼整個URL，而後須要使用這個URL，那麼用encodeURI。

 

好比

encodeURI("http://www.cnblogs.com/season-huang/some other thing");

編碼後會變爲

"http://www.cnblogs.com/season-huang/some%20other%20thing";

其中，空格被編碼成了%20。可是若是你用了encodeURIComponent，那麼結果變爲

"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"

看到了區別嗎，連 "/" 都被編碼了，整個URL已經無法用了。

　　

三、當你須要編碼URL中的參數的時候，那麼encodeURIComponent是最好方法。

var param = "http://www.cnblogs.com/season-huang/"; //param爲參數
param = encodeURIComponent(param);
var url = "http://www.cnblogs.com?next=" + param;
console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"