JavaScript中URL编码的三种方式：escape、encodeURI与encodeURIComponent详解

JavaScript URL编码概述

JavaScript语言中用于编码的函数主要有三个，其中历史最悠久的是escape()。尽管该函数目前已不再被推荐用于现代开发，但受历史遗留代码影响，许多系统中仍可见其身影，因此有必要首先对其进行介绍。

escape与unescape函数详解

escape 和 unescape

实际上，escape()并不直接适用于标准的URL编码场景，其核心功能是返回字符的Unicode编码值。例如，对字符串"春节"进行编码，结果为%u6625%u8282。这意味着在Unicode字符集中，"春"对应十六进制第6625位，"节"对应第8282位。

其具体编码规则如下：除了ASCII字母、数字以及标点符号"@ * _ + - . /"之外，其他所有字符均会被编码。位于u0000到u00ff之间的符号会被转换为%xx格式，其余符号则转换为%uxxxx格式。对应的解码函数为unescape()。

在使用该函数时，有两个关键注意事项。

首先，无论网页原始编码格式如何，经过JavaScript编码处理后，结果均变为Unicode字符。也就是说，这些JavaScript函数的输入和输出默认均基于Unicode字符集，这一特性同样适用于下文介绍的另外两个函数。

其次，escape()不会对加号"+"进行编码。然而，在网页表单提交过程中，空格通常会被转换为"+"字符，且服务器在处理数据时会将"+"解析为空格。因此，在使用escape()时需格外小心，以免产生数据解析错误。

例如：

编码：

escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"

escape('张')
结果："%u5F20"

解码：

unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果："http://www.baidu.com?name=zhang@xiao@jie&order=1"

unescape("%u5F20")
结果："张"

encodeURI与decodeURI函数详解

encodeURI 和 decodeURI

encodeURI()是JavaScript中专门用于对完整URL进行编码的函数。

该函数旨在对整个URL字符串进行编码，因此除了常见符号外，它还会保留URL中具有特殊含义的符号，如"; / ? : @ & = + $ , #"，不对这些字符进行编码。编码后的输出采用UTF-8格式，并在每个字节前添加%符号。

其对应的解码函数为decodeURI()。

注：需要注意的是，它不对单引号'进行编码。

例如：

编码：

encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果：http://www.baidu.com?name=zhang@xiao@jie&order=1

解码：

decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果：http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1

encodeURIComponent与decodeURIComponent函数详解

encodeURIComponent 和 decodeURIComponent

最后一个JavaScript编码函数是encodeURIComponent()。与encodeURI()的主要区别在于，它用于对URL的组成部分（如查询参数）进行单独编码，而不应用于对整个URL进行编码。

因此，在encodeURI()中被保留不编码的符号（如"; / ? : @ & = + $ , #"），在encodeURIComponent()中均会被编码。至于具体的编码算法，两者是一致的。

其对应的解码函数为decodeURIComponent()。

例如：

编码：

encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果："http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"

解码：

decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
http://www.baidu.com?name=zhang@xiao@jie&order=1

以上关于JavaScript中URL编码与解码三种方式的区别解析即为全部内容，希望能对读者有所帮助，也欢迎大家继续支持本站。