JS中URL编码与解码方法详解_javascript技巧

encodeURI用于编码完整URL，保留结构字符，适用于整个链接；encodeURIComponent更严格，编码所有特殊字符，适合参数值；两者对应各自的解码方法，避免乱码。

在JavaScript中处理URL时，经常需要对特殊字符进行编码和解码，以确保数据能正确传输。由于URL中不允许出现空格、中文或其他非ASCII字符，必须通过编码转换为合法格式。JS提供了三种常用方法来实现这一功能：encodeURI、encodeURIComponent 和 decodeURI、decodeURIComponent。下面详细介绍它们的用法与区别。

encodeURI：编码完整URL

encodeURI 用于对整个URL进行编码，它会保留URL中的合法结构字符，如冒号、斜杠、问号、井号等，只对非法字符进行转义。

适用场景：当你希望编码一个完整的URL，同时保持其结构完整时使用。

• 不会被编码的字符包括：: / ? # @ + - _ . ! ~ * ' ( )
• 会被编码的字符：空格、中文、制表符等

示例：

立即学习“Java免费学习笔记（深入）”；

文心快码

文心快码（Comate）是百度推出的一款AI辅助编程工具

35

查看详情

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 的使用时机，能有效避免前端传参中的乱码和解析错误问题。不复杂但容易忽略细节。

以上就是JS中URL编码与解码方法详解_javascript技巧的详细内容，更多请关注php中文网其它相关文章！