JavaScript中encodeURI与encodeURIComponent的区别及用法详解

JavaScript中涉及URL编码与解码的四个关键函数：encodeURI、encodeURIComponent、decodeURI以及decodeURIComponent。

在JavaScript中，对文本进行编码主要依赖两个函数：encodeURI和encodeURIComponent；相应地，解码则使用decodeURI和decodeURIComponent这两个函数。

这些函数的主要用途是对统一资源标识符（URI）进行编码和解码操作。

统一资源标识符，即URI，是一种用于标识互联网上资源（如网页或文件）以及访问这些资源所采用的传输协议（如HTTP或FTP）的字符串格式。

encodeURI和decodeURI函数针对的是完整的URI字符串。由于完整URI中的某些保留字符具有特定的语法意义，因此这两个函数在编码时会保留这些字符，不对它们进行转义。

encodeURI函数主要适用于将完整的URL直接赋值给浏览器地址栏的场景。

location.href=encodeURI("http://www.cnblogs.com/Tezml/");

encodeURIComponent和decodeURIComponent函数则针对URI的各个组成部分进行操作。encodeURIComponent的作用是将文本字符串编码为一个有效的统一资源标识符（URI）组件。这两个函数假设输入中的保留字符仅代表普通文本，因此必须对它们进行编码，以确保这些字符在完整URI的组件中不会被解析为保留字符。

具体原因如下：如果变量username的值为'a&foo=boo'，且不使用encodeURIComponent进行编码，生成的参数串将变为name=a&foo=boo。这会导致CGI程序将其解析为两个独立的参数name和foo，而非预期的单个参数，从而产生非预期的结果。

JavaScript中还有一个功能类似的函数encodeURI，但它不会编码以下字符：冒号（":"）、斜杠（"/"）、分号（";"）和问号（"?"）。

在需要传递查询参数时，应当使用encodeURIComponent。

这样可以确保组合后的URL不会被#等特殊字符截断，保证链接的完整性。

具体示例如下：

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

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

decodeURI()和decodeURIComponent()函数可以对由特定编码函数生成的加密字符串进行解密操作，将其还原为未加密的原始字符串，这一功能在实际开发中非常实用。

以下是decodeURI()函数的定义和用法说明。

decodeURI()函数用于对由encodeURI()函数编码过的URI进行解码还原。

语法格式为：decodeURI(URIstring)。

参数说明：URIstring为必需参数，是一个包含待解码URI或其他待解码文本的字符串。

返回值：返回URIstring的副本，其中所有的十六进制转义序列将被替换为它们所代表的实际字符。

以下是decodeURIComponent()函数的定义和用法说明。

decodeURIComponent()函数用于对由encodeURIComponent()函数编码的URI组件进行解码。

语法格式为：decodeURIComponent(URIstring)。

参数说明：URIstring为必需参数，是一个包含编码后的URI组件或其他待解码文本的字符串。

返回值：返回URIstring的副本，其中所有的十六进制转义序列将被替换为它们所代表的实际字符。

关于URL传参中的字符加密及解码方式的选择。

encodeURI/decodeURI与encodeURIComponent/decodeURIComponent这四个方法的核心作用都是对URI进行编码和解码处理。

它们均用于处理统一资源标识符的编码与解码过程。

关于encodeURI的详细说明：

该函数通过将特定字符的每个实例替换为一个、两个、三个或四个转义序列来对统一资源标识符（URI）进行编码（对于由两个代理字符组成的UTF-8编码字符，则使用四个转义序列）。encodeURI自身无法生成适用于HTTP GET或POST请求的URI，例如在XMLHTTPRequests中，因为"&"、"+"和"="等字符在GET和POST请求中具有特殊含义，而encodeURI不会对它们进行编码。然而，encodeURIComponent方法会对这些字符进行编码。

关于decodeURI的详细说明：

该函数用于解码由encodeURI先前创建的统一资源标识符（URI）或类似例程生成的字符串。

关于encodeURIComponent的详细说明：

该方法是对统一资源标识符（URI）的组成部分进行编码。它使用一到四个转义序列来表示字符串中每个字符的UTF-8编码（仅由两个Unicode代理区字符组成的字符使用四个转义字符编码）。除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符均会被转义。

关于decodeURIComponent的详细说明：

该方法用于解码由encodeURIComponent方法或其他类似方法编码的部分统一资源标识符（URI）。

需要注意的是，若解码字符串中包含未正确编码的%，则会报错。

报错原因如下：

escape/unescape函数用于对字符串进行编码和解码。

此函数使字符串具有可移植性，使其可以通过任何网络传输到任何支持ASCII字符的计算机。

此函数对特殊字符进行编码，但以下字符除外：*、@、-、_、+、.、/。

个人心得与总结：

当需要转码/解码的URL是一个完整、可直接访问的URL时，应使用encodeURI/decodeURI；当需要转码/解码的URL是作为链接的一部分（例如用作参数）时，应使用encodeURIComponent/decodeURIComponent。针对使用encodeURIComponent/decodeURIComponent时解析'%'报错的问题，推荐使用escape/unescape函数来避免页面报错。

总结：

以上为个人经验总结，希望能给大家一个参考，也希望大家多多支持本站。