比较escape、encodeURI、encodeURIComponent

估计很多前端工程师并不清楚escape,encodeURI, encodeURIComponent的区别,也不知道什么时候该用哪个方法,以及这些方法为什么要被用到,下面我主要来阐述一下这三个方法的区别以及用法。

escape 方法:

?escape() 方法生成新的由十六进制转义序列替换的字符串。escape?函数是全局对象的属性. 特色字符如: @*_+-./?被排除在外。字符的16进制格式值,当该值小于等于0xFF时,用一个2位转移序列: %xx 表示。大于的话则使用4位序列:%uxxxx 表示。

该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

看看例子吧:

escape('abc123');     // "abc123"
escape('??ü');        // "%E4%F6%FC"
escape('?');          // "%u0107"

// special characters
escape('@*_+-./');    // "@*_+-./"

escape('~!@#$%^&*(){}[]=:/,;?+\'"\\')  
//%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C

encode 方法:

encodeURI() 是对统一资源标识符(URI)进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码(只有由两个代理字符区组成的字符才用四个转义字符编码)。

假定一个URI是完整的URI,那么无需对那些保留的并且在URI中有特殊意思的字符进行编码。encodeURI 会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列:

类型 包含
保留字符 ; , / ? : @ & = + $
非转义的字符 字母 数字?- _ . ! ~ * ' ( )
数字符号 #

请注意,encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 “&”, “+”, 和 “=” 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

通过替换每一个字符实例成一个或是两三个编码过的UTF-8字符,来对URI编码。

例子:

encodeURI('~!@#$%^&*(){}[]=:/,;?+\'"\\')??
//~!@#$%25%5E&*()%7B%7D%5B%5D=:/,;?+'%22%5C

encodeURIComponent 方法:

encodeURIComponent()是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码(只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)。encodeURIComponent 转义除了字母、数字、().!~*'-_之外的所有字符。

这个解释和encode一样,实际上encodeURI 和 encodeURIComponent 差别就是一个是对更多的字符编码,而一个只是对URI部分编码。

同样字符串的例子:

escape('~!@#$%^&*(){}[]=:/,;?+\'"\\')??
//%7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C??
encodeURI('~!@#$%^&*(){}[]=:/,;?+\'"\\');??
//~!@#$%25%5E&*()%7B%7D%5B%5D=:/,;?+'%22%5C??
encodeURIComponent('~!@#$%^&*(){}[]=:/,;?+\'"\\');??
//~!%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3A%2F%2C%3B%3F%2B'%22%5C

总结:

escape 方法已经在 ECMAScript v3 标准中被删除了, 所以不推荐使用.

对应的解码函数为 unescape, decodeURI 和 decodeURIComponent.

var url = 'https://www.html.cn/?s=前端;?
var results = ['URI: ' + url];?
// escape
results.push('escape: ' + escape(url));
// encodeURI
results.push('encodeURI: ' + encodeURI(url));
// encodeURIComponent
results.push('encodeURIComponent: ' + encodeURIComponent(url));?

/*
results结果:
"URI: https://www.html.cn/?s=前端"
"escape: http%3A//www.css88.com/%3Fs%3D%u524D%u7AEF"
"encodeURI: https://www.html.cn/?s=%E5%89%8D%E7%AB%AF"
"encodeURIComponent: http%3A%2F%2Fwww.css88.com%2F%3Fs%3D%E5%89%8D%E7%AB%AF" 
*/

具体使用

escape:
escape 不会编码的字符:@*/+
escape方法不回编码+字符,+字符在服务器端会被解释成空格,这点和通过表达提交一样。
由于escape有这样的缺点,和它不能很好的正确处理非ASCII字符的事实,我们应该尽量避免(对URI)使用escape,最好的方式是encodeURIComponent。

encodeURI:
encodeURI 不会编码的字符很多,有:~!@#$&*()=:/,;?+’
在对一段URI编码来说,encodeURI方法比escape方法更专业一些。当你需要编码一整个URI的时候,你可以使用此方法,因为URI中的合法字符都不会被编码转换。需要注意到是字符’也是URI中的合法字符,所以也不会被编码转换。

encodeURIComponent:
encodeURIComponent不会编码的字符: ~!*()’
encodeURIComponent方法在编码单个URIComponent(指请求参数)应当是最常用的。需要注意到是字符’也是URI中的合法字符,所以也不会被编码转换。

引用:

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 比较escape、encodeURI、encodeURIComponent

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    escape 方法已经在 ECMAScript v3 标准中被删除了, 所以不推荐使用。对应的解码函数为 unescape, decodeURI 和 decodeURIComponent。encodeURIComponent方法在编码单个URIComponent(指请求参数)应当是最常用的。

    PHP程序员雷雪松2年前 (2017-02-14)回复
  2. #-48

    这个文章整理的很好,escape这个函数在一些移动设备上能用,很多人就误以为可以用,但是有些IOS新设备就不能用了,这就带来了跨平台问题,这也是我们做移动OA项目的时候亲历所感!

    H5移动工程师2年前 (2017-02-20)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏