js-escape()、encodeURI()、encodeURIComponent()区别

最新推荐文章于 2022-03-24 16:14:14 发布

Mars-xq

最新推荐文章于 2022-03-24 16:14:14 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/sinat_31057219/article/details/58609173

javascript 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了JavaScript中的三种URL编码函数：escape(), encodeURI(), encodeURIComponent()及其对应的解码函数。通过对比，阐述了它们在处理URL时的不同作用及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript中有三个可以对字符串编码的函数，分别是：
escape, encodeURI, encodeURIComponent，
相应3个解码函数：
unescape, decodeURI, decodeURIComponent 。

1 escape()函数
escape(string)

返回值
已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。其他所有的字符都会被转义序列替换。

2 encodeURI()函数
encodeURI(URIstring)

返回值
URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。

该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

3 encodeURIComponent() 函数
encodeURIComponent(URIstring)

返回值
URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。

其他字符（比如：; / ? : @ & = + $,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

提示和注释
提示：请注意 encodeURIComponent() 函数与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

4 总结：

通过对三个函数的分析，我们可以知道：escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent（指请求参数）应当是最常用的，它可以讲参数中的中文、特殊字符进行转义，而不会影响整个URL。

encodeURI和encodeURIComponent的比较:

encodeURI：
//该方法不会对 ASCII 字母和数字进行编码，
//也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
//URI 中具有特殊含义的 ASCII 标点符号，如：;/?:@&=+$,# 也不会进行转码。

encodeURIComponet：
//该方法不会对 ASCII 字母和数字进行编码，
//也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
//其他它字符（包括 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号）都会进行转码。

总结：
（1）encodeURI的目的是对 URI 进行整体编码，故适用于url跳转时使用；
（2）encodeURIComponent会把部分uri关键字符（如：&等）也进行转换，故适用于传递参数时使用。

5 、示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<script type="text/javascript">
document.write(escape("http://www.w3school.com.cn/") + "<br />")
document.write(escape("?!=()#%&"))

document.write("<br />")
document.write("<br />")

document.write(encodeURI("http://www.w3school.com.cn/")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/"))
document.write("<br />")
document.write(encodeURI(",/?:@&=+$#"))

document.write("<br />")
document.write("<br />")

document.write(encodeURIComponent("http://www.w3school.com.cn/"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))


</script>
</body>
</html>