比较escape、encodeURI、encodeURIComponent

估计很多前端工程师并不清楚escape,encodeURI, encodeURIComponent的区别,也不知道什么时候该用哪个方法,以及这些方法为什么要被用到,下面我主要来阐述一下这三个方法的区别以及用法。
[b]escape 方法:[/b]
[quote]MSDN JScript:
The escape method returns a string value (in Unicode format) that contains the contents of [the argument]. All spaces, punctuation, accented characters, and any other non-ASCII characters are replaced with %xx encoding, where xx is equivalent to the hexadecimal number representing the character. For example, a space is returned as "%20."[/quote]
escape 方法返回一个包含参数内容的UNICODE格式的字符串值。所有的“空格”、“标点”、“重音字符”以及任何非ASCII字符都会被替换为带着%xx 编码,这里的xx是一个表示原来字符的16进制数字。例如一个空格会被替换为%20
[quote]Mozilla Developer Core Javascript Guide 的描述
The escape and unescape functions let you encode and decode strings. The escape function returns the hexadecimal encoding of an argument in the ISO Latin character set. The unescape function returns the ASCII string for the specified hexadecimal encoding value.[/quote]
escape 和 unescape 方法让你可以对字符串编码和解码。 escape 调用方法将返回对ISO拉丁字符参数的16进制编码,而 unescape 方法会为指定的16进制编码返回ASCII 字符。
看看例子吧

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

[b]encode 方法:[/b]
[quote]MSDN JScript:
The encodeURI method returns an encoded URI. If you pass the result to decodeURI, the original string is returned. The encodeURI method does not encode the following characters: ":", "/", ";", and "?". Use encodeURIComponent to encode these characters.[/quote]
encodeURI 方法返回一个编码的 URI, encodeURI 不对以下字符编码:
":", "/", ";", and "?" 而可以用encodeURIComponent对这些字符编码
下面说的更详细一些
[quote]Mozilla Developer Core Javascript Guide:
Encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.[/quote]

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

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

[b]encodeURIComponent 方法:[/b]
[quote]MSDN JScript Reference:
The encodeURIComponent method returns an encoded URI. If you pass the result to decodeURIComponent, the original string is returned. Because the encodeURIComponent method encodes all characters, be careful if the string represents a path such as /folder1/folder2/default.html. The slash characters will be encoded and will not be valid if sent as a request to a web server. Use the encodeURI method if the string contains more than a single URI component.[/quote]
encodeURIComponent会对更多的字符进行编码,包括表示路径的"/",所以当使用时,需要谨慎
[quote]Mozilla Developer Core Javascript Guide:
Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.[/quote]
这个解释和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

[b]总结:[/b]
该怎么使用呢?

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

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

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


[b]我的小结:[/b]
其实前端最常用的是encodeURIComponent,因为这个方法会把URI中的queryString中的非法字符编码,这样通过get请求向服务器端传递参数的时候不会出错。
escape 在后端和前端的接口规约里常常会碰到,但是一般不需要前端在本地escape,一般是后端接口吐出 escape后的数据,前端unescape。
此文章是翻译而来

原文:http://xkr.us/articles/javascript/encode-compare/
关于URL,URI不太明白的同学可以看看 http://www.ibm.com/developerworks/cn/xml/x-urlni.html
这篇文章
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值