0
点赞
收藏
分享

微信扫一扫

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"

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

关于JS的调试,参考博文:
​​​九个Console命令,让 JS 调试更简单​​​​一探前端开发中的JS调试技巧​​


举报

相关推荐

0 条评论