如何區分escape好encodeURI以及encodeURIComponent

今天就跟大家聊聊有關如何區分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("https://www.jb51.net/season-huang/some other thing");

編碼后會變為

"https://www.jb51.net/season-huang/some%20other%20thing";

其中，空格被編碼成了%20。但是如果你用了encodeURIComponent，那么結果變為

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

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

3、當你需要編碼URL中的參數的時候，那么encodeURIComponent是最好方法。

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

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

看完上述內容，你們對如何區分escape好encodeURI以及encodeURIComponent有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。