JavaScript字符串编码函数escape、encodeURI与encodeURIComponent的区别详解

JavaScript字符串编码函数概述

JavaScript提供了三种用于字符串编码的函数，分别是：escape、encodeURI和encodeURIComponent，对应的解码函数分别为：

unescape、decodeURI和decodeURIComponent。

下面简要介绍它们之间的主要区别。

escape()函数详解

1. escape()函数

定义和用法

escape()函数可对字符串进行编码，确保该字符串能在所有计算机上被正确读取。

语法

escape(string)

参数说明

string：必需。需要被转义或编码的字符串。

返回值

返回已编码的string副本，其中部分字符被替换为十六进制的转义序列。

说明

该方法不会对ASCII字母和数字进行编码，也不会对以下ASCII标点符号进行编码：-_.*

其余所有字符都会被替换为十六进制转义序列。

encodeURI()函数详解

2. encodeURI()函数

定义和用法

encodeURI()函数可将字符串作为完整的URI进行编码。

语法

encodeURI(URIstring)

参数说明

URIstring：必需。一个包含URI或待编码文本的字符串。

返回值

返回URIstring的副本，其中部分字符被替换为十六进制转义序列。

说明

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

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

encodeURIComponent()函数详解

3. encodeURIComponent()函数

定义和用法

encodeURIComponent()函数可将字符串作为URI组件进行编码。

语法

encodeURIComponent(URIstring)

参数说明

URIstring：必需。一个包含URI组件或待编码文本的字符串。

返回值

返回URIstring的副本，其中部分字符被替换为十六进制转义序列。

说明

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

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

提示和注释

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

三种编码函数的区别总结

4. 总结：

通过上述分析可知：escape()除了ASCII字母、数字和特定符号外，会对传入字符串全部进行转义编码，因此不建议用于URL编码。encodeURI()用于编码整个URI，因为URI中的合法字符不会被转换。encodeURIComponent()在编码单个URI Component（如请求参数）时最为常用，它能转义参数中的中文和特殊字符，而不影响整个URL的结构。

代码示例与使用场景

5. 示例：

1. escape()示例

<script type="text/javascript">
document.write(escape("http://www.w3school.com.cn/") + "<br />")
document.write(escape("?!=()#%&"))
</script>输出：
http%3A//www.w3school.com.cn
%3F%21%3D%28%29%23%25%26

2. encodeURI()示例

<script type="text/javascript">
document.write(encodeURI("http://www.w3school.com.cn/")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/"))
document.write(encodeURI(",/?:@&=+$#"))
</script>输出：
http://www.w3school.com.cn/
http://www.w3school.com.cn/My%20first/
,/?:@&=+$#

对整个URL进行编码，URL中的特定标识符不会被转码。

3. encodeURIComponent()示例

例1：

<script type="text/javascript">
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输出：
http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

例2：

<script language="javascript">document.write('
<a href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+'">退出</a>');</script>

对URL中的参数进行编码，因为参数本身也是一个URL，若不编码会影响整个URL的跳转。