估计很多Tian工程师并不清楚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.7psus5.com/?s=Tian;? 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.7psus5.com/?s=Tian" "escape: http%3A//www.css88.com/%3Fs%3D%u524D%u7AEF" "encodeURI: https://www.7psus5.com/?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中的合法字符,所以也不会被编码转换。
引用:
- ,
- ,
escape 方法已经在 ECMAScript v3 标准中被删除了, 所以不推荐使用。对应的解码函数为 unescape, decodeURI 和 decodeURIComponent。encodeURIComponent方法在编码单个URIComponent(指请求参数)应当是最常用的。
这个文章整理的很好,escape这个函数在一些移动设备上能用,很多人就误以为可以用,但是有些IOS新设备就不能用了,这就带来了跨平台问题,这也是我们做移动OA项目的时候亲历所感!