URL编码中的escape、encodeURI和encodeURIComponent

【1】escape和unescape

escape对字符串进行编码。

语法格式：

escape(string)

该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。

最关键的是，当你需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。

unescape对由 escape() 编码的字符串进行解码。

unescape(string)

该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。

需要说明的是：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

【2】encodeURI和decodeURI()

encodeURI() ：把字符串作为 URI 进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

如果 URI 组件中含有分隔符，比如 ? 和 #，则应当使用 encodeURIComponent() 方法分别对各组件进行编码。

decodeURI() ：可对 encodeURI() 函数编码过的 URI 进行解码。

返回URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。

【3】encodeURIComponent和decodeURIComponent

encodeURIComponent() ：可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说，encodeURIComponent会把 http://  编码成  http%3A%2F%2F 而encodeURI却不会。

decodeURIComponent

decodeURIComponent函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

返回URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。

【4】分场合使用

① 如果只是编码字符串，不和URL有半毛钱关系，那么用escape。

② 如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。

比如

encodeURI("http://www.w3school.com.cn/My first/");

编码后会变为

"http://www.w3school.com.cn/My%20first/";

其中，空格被编码成了%20。但是如果你用了encodeURIComponent，那么结果变为

"http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F"

很显然后者是不可使用的，"/"都被编码了！

③ 当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。

即，你需要编码的内容作为url的参数，无论这个内容是什么。也就是说，uri组件也需要编码

var param = "http://www.w3school.com.cn/My first/"; 
//param为参数
param = encodeURIComponent(param);
var url = "http://www.w3school.com.cn/My first/?next=" + param;
console.log(url) 
//"http://www.w3school.com.cn/My first/?next=http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F"

实际工作中，多使用第二，第三种方式。