深入探秘 encodeURIComponent 与 encodeURI：JS 中的 URL 编码利器

最新推荐文章于 2025-02-28 15:04:45 发布

Jiaberrrr

最新推荐文章于 2025-02-28 15:04:45 发布

阅读量1.9k

点赞数 20

文章标签： javascript 前端 uni-app 微信小程序

本文链接：https://blog.csdn.net/Jiaberrr/article/details/144422345

版权

一、引言

在 JavaScript 开发中，正确处理 URL 编码至关重要。在网络应用中，URL 常常被用于定位资源、传递参数以及执行重定向等操作。如果 URL 编码处理不当，可能会导致资源无法正确定位、参数传递错误，甚至引发安全问题。

而 encodeURIComponent 和 encodeURI 这两个函数在 URL 编码中起着关键作用。它们能够将特殊字符转换为安全的编码形式，确保 URL 在不同的环境中都能被正确解析和处理。无论是在与服务器进行数据交互，还是在页面之间进行导航，正确使用这两个函数都能保证 URL 的准确性和可靠性。

二、encodeURIComponent 的用法

1、函数定义及作用

encodeURIComponent 是 JavaScript 自带的函数，可把字符串作为 URI 组件进行编码，会转码除了语义字符之外的所有字符。语义字符包括：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）。其他字符，如分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）等元字符都会被转码。这样在 query 参数中有 &、空格等字符时，也不会影响对整个 url 的参数解析，因为它们都被转码了。

2、语法及示例展示

encodeURIComponent 的语法格式为 encodeURIComponent (uri)。例如：

在这个例子中，encodeURIComponent 函数被用于对搜索参数 "JavaScript & Web Development" 进行编码，以确保该参数不会干扰 URL 的解析。搜索参数经过编码结果如下：https://example.com/search?q=JavaScript%20%26%20Web%20Development。使用 decodeURIComponent () 可以解码：

decodeURIComponent('JavaScript%20%26%20Web%20Development')

3. URL 和 URI 的区别

在涉及 encodeURIComponent 时，顺带介绍 URL 和 URI 的区别。Java 类库里有两个对应的类 java.net.URL 和 java.net.URI，官方的定义分别如下：

URL（统一资源定位符）：A Uniform Resource Locator that identifies the location of an Internet resource as specified by RFC 1738.（统一资源定位符用于标示网络资源的位置）。

URI（统一资源标识符）：A Uniform Resource Identifier that identifies an abstract or physical resource, as specified by RFC 2396.（统一资源标识符用于标示一个抽象或者物理资源）。也就是说 URI 是以一种抽象的，高层次概念定义统一资源标识，而 URL 则是具体的资源标识的方式。URL 是一种 URI，即 URL 是 URI 的一个子集。

三、encodeURI 的用法

1、函数定义及作用

encodeURI函数可把字符串作为 URI 进行编码，其主要作用是对字符串进行编码，使得其可以安全地作为统一资源标识符（URI）使用。它不会对 ASCII 字母和数字以及一些特定标点符号进行编码，这些不被编码的字符包括：- _.! ~ * ' ( )。这样可以确保在处理 URL 时，一些常见的字符不会被不必要地转义，从而保持 URL 的可读性和简洁性。

2、语法及示例

encodeURI的语法为encodeURI(URIstring)。例如：

const uri = "https://www.example.com/My first/?query=test&another=value";

const encodedUri = encodeURI(uri);

console.log(encodedUri);

在这个例子中，encodeURI函数对给定的 URI 进行编码，编码后的结果将一些特殊字符进行了转义，如空格被编码为%20，但不会对特定的 ASCII 标点符号进行编码。

3、提示和注释

在使用encodeURI时，需要注意以下几点：

该函数不会对一些在 URI 中具有特殊含义的 ASCII 标点符号进行转义，如；/?:@&=+$,#。

如果 URI 组件中含有分隔符，比如?和#，则应当使用encodeURIComponent()方法分别对各组件进行编码，以确保 URL 的准确性和完整性。

四、两者的区别

1、转义字符范围不同

- encodeURIComponent 转义范围更广，会对 URL 中的保留字符也进行转义。例如，分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）等元字符都会被转义。而 encodeURI 通常不会对这些字符进行转义。

2、使用场景不同

- encodeURI 通常用于转码整个 URL，以确保 URL 在不同环境中能被正确解析和处理。例如，当期望获取一个可用的 URL 地址时，可以使用 encodeURI 进行编码。如 encodeURI ("www.example.org/a file with spaces.html")，编码后的结果可以在浏览器中正常访问。

- encodeURIComponent 用于转码 URL 的组成部分，如查询参数或路径段。当需要对 URL 的参数进行编码时，使用 encodeURIComponent ()。例如，当链接带着一些特殊参数，如回调地址时，就需要使用 encodeURIComponent 对回调地址进行转码，这样可以避免 URL 中出现多个特殊字符，方便对回调地址进行处理。如'https://www.baidu.com/s?returnURL='+encodeURIComponent ('http://www.test.com/')，输出结果为 "百度安全验证"。

五、应用案例

1、参数传递场景展示在传递参数时，如何正确使用 encodeURIComponent 避免特殊字符截断？

在 URL 参数传递场景中，使用 encodeURIComponent 至关重要。例如，当我们要传递一个包含特殊字符的查询参数时，如果不使用 encodeURIComponent 进行编码，可能会导致参数截断或解析错误。正如写作素材中提到的，当参数出现空格这样的特殊字段时，后台可能只读取到空格前的内容，后面内容丢失，造成数据读取失败。但是如果使用 encodeURIComponent 对参数进行编码，这些特殊字符会被转义，后台就可以成功读取了。例如：

const data = {name:"John Doe", city:"New York", email:"john.doe@example.com"};

let params = Object.keys(data).map(key=>encodeURIComponent(key)+'='+encodeURIComponent(data[key])).join('&');

console.log(params);

在这个例子中，encodeURIComponent 函数将对象中的键值对进行编码，确保在作为 URL 参数传递时不会出现问题。

2、URL 跳转场景说明在进行 url 跳转时，使用 encodeURI 的示例。

在进行 URL 跳转时，使用 encodeURI 可以确保 URL 在不同环境中能被正确解析和处理。例如：

const uri = "https://www.example.com/My first/?query=test&another=value";

const encodedUri = encodeURI(uri);

console.log(encodedUri);

在这个例子中，encodeURI 函数对给定的 URI 进行编码，编码后的结果将一些特殊字符进行了转义，如空格被编码为%20，但不会对特定的 ASCII 标点符号进行编码，这样可以保持 URL 的可读性和简洁性，同时确保在进行 URL 跳转时不会出现错误。

3、作为 URL 参数场景举例当一个 URL 地址当作另一个 URL 的参数时，encodeURIComponent 的作用。

当一个 URL 地址当作另一个 URL 的参数时，encodeURIComponent 可以确保该 URL 地址中的特殊字符被正确编码，避免影响整个 URL 的解析。例如：

var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";

var url = "http://localhost:8080/pp?a=1&b="+ encodeURIComponent(paramUrl);

console.log(url);

在这个例子中，encodeURIComponent 函数对作为参数的 URL 地址进行编码，确保在传递过程中不会出现特殊字符导致的解析错误。

六、总结

encodeURIComponent和encodeURI在 JavaScript 开发中都起着重要的作用，它们各自有着不同的特点和适用场景。

encodeURIComponent转义范围更广，会对 URL 中的保留字符也进行转义，适用于转码 URL 的组成部分，如查询参数或路径段。在需要对 URL 的参数进行编码时，使用encodeURIComponent可以避免特殊字符导致的解析错误，确保后台能够成功读取参数。同时，当一个 URL 地址当作另一个 URL 的参数时，encodeURIComponent可以确保该 URL 地址中的特殊字符被正确编码，避免影响整个 URL 的解析。

encodeURI通常用于转码整个 URL，不会对一些 ASCII 标点符号进行转义，这样可以保持 URL 的可读性和简洁性，同时确保 URL 在不同环境中能被正确解析和处理。例如，当期望获取一个可用的 URL 地址时，可以使用encodeURI进行编码。

在不同的情况下，正确选择使用encodeURIComponent和encodeURI非常重要。如果需要编码整个 URL，应该使用encodeURI；如果只需要编码 URL 的一部分，那么应该使用encodeURIComponent。这样可以确保 URL 的准确性和可靠性，避免出现资源无法正确定位、参数传递错误等问题。