簡單明了區分escape、encodeURI和encodeURIComponent

一、前言

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

二、escape和它們不是同一類

簡單來說，escape是對字元串(string)進行編碼(而另外兩種是對URL)，作用是讓它們在所有電腦上可讀。

編碼之後的效果是%XX或者%uXXXX這種形式。

其中 ASCII字母、數字、@*/+ ，這幾個字元不會被編碼，其餘的都會。

最關鍵的是，當你需要對URL編碼時，請忘記這個方法，這個方法是針對字元串使用的，不适用于URL。

事實上，這個方法我還沒有在實際工作中用到過，是以就不多講了。

三、最常用的encodeURI和encodeURIComponent

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

它們都是編碼URL，唯一差別就是編碼的字元範圍，其中

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

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

是以encodeURIComponent比encodeURI編碼的範圍更大。

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

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

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

　　　 

1、如果隻是編碼字元串，不和URL有半毛錢關系，那麼用escape。

2、如果你需要編碼整個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已經沒法用了。

　　

3、當你需要編碼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"      

看到了把，參數中的 "/" 可以編碼，如果用encodeURI肯定要出問題，因為後面的/是需要編碼的。

轉載本站文章請注明作者和出處 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用于任何商業用途