encodeURI用于编码完整URL，保留结构字符，适用于整个链接；encodeURIComponent更严格，编码所有特殊字符，适合参数值；两者对应各自的解码方法，避免乱码。
在javaScript中处理URL时，经常需要对特殊字符进行编码和解码，以确保数据能正确传输。由于URL中不允许出现空格、中文或其他非ASCII字符，必须通过编码转换为合法格式。js提供了三种常用方法来实现这一功能：encodeURI、encodeURIComponent 和 decodeURI、decodeURIComponent。下面详细介绍它们的用法与区别。
encodeURI：编码完整URL
encodeURI 用于对整个URL进行编码，它会保留URL中的合法结构字符，如冒号、斜杠、问号、井号等，只对非法字符进行转义。
适用场景：当你希望编码一个完整的URL，同时保持其结构完整时使用。
- 不会被编码的字符包括：: / ? # @ + – _ . ! ~ * ‘ ( )
- 会被编码的字符：空格、中文、制表符等
示例：
立即学习“Java免费学习笔记（深入）”；
const url = “https://example.com/搜索页面?name=张三”;
console.log(encodeURI(url));
// 输出: https://example.com/%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2?name=%E5%BC%A0%E4%B8%89
encodeURIComponent：编码URL组件
encodeURIComponent 比 encodeURI 更严格，它会把所有非字母数字字符都编码，包括 &, =, % 等用于分隔参数的符号。
适用场景：用于编码URL中的查询参数值或片段，防止特殊字符破坏参数结构。
- 几乎所有特殊字符都会被编码
- 常用于拼接 query 参数时对值进行处理
示例：
立即学习“Java免费学习笔记（深入）”；
const paramName = “姓名”;
const paramValue = “李四&年龄=25”;
const encoded = encodeURIComponent(paramName) + “=” + encodeURIComponent(paramValue);
console.log(encoded);
// 输出: %E5%90%8D%E5%AD%97=%E6%9D%8E%E5%9B%9B%26%E5%B9%B4%E9%BE%84%3D25
decodeURI 与 decodeURIComponent：解码操作
这两个方法分别用于还原由 encodeURI 和 encodeURIComponent 编码后的字符串。
- decodeURI：解码整个URL，适用于之前用 encodeURI 编码的内容
- decodeURIComponent：解码单独的参数部分，处理更彻底
注意：如果用错解码方法（比如用 decodeURI 去解 encodeURIComponent 的结果），可能导致部分字符无法正确还原。
示例：
立即学习“Java免费学习笔记（深入）”；
const encodedStr = “%E5%BC%A0%E4%B8%89”;
console.log(decodeURIComponent(encodedStr)); // 输出: 张三
console.log(decodeURI(“https%3A%2F%2Fexample.com”)); // 不推荐，应使用 decodeURIComponent
常见问题与使用建议
实际开发中容易混淆这两个编码方法，以下是一些实用建议：
- 编码整个URL链接时用 encodeURI
- 编码URL中的参数值或键时用 encodeURIComponent
- 不要对已经编码过的字符串重复编码，否则会出现双重编码错误
- 服务端接收时也要对应解码方式，避免乱码
例如，在拼接带中文参数的请求链接时：
const baseUrl = “https://api.example.com/search”;
const query = “城市=北京&类型=住宅”;
const url = baseUrl + “?” + Object.keys(obj).map(key =>
`${key}=${encodeURIComponent(obj[key])}`).join(“&”);
基本上就这些。掌握好 encodeURI 与 encodeURIComponent 的使用时机，能有效避免前端传参中的乱码和解析错误问题。不复杂但容易忽略细节。