【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"
实际工作中,多使用第二,第三种方式。
关于JS的调试,参考博文:
九个Console命令,让 JS 调试更简单一探前端开发中的JS调试技巧