JS中URL编码与解码方法详解_j*ascript技巧_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JS中URL编码与解码方法详解_j*ascript技巧

2025-10-31

浏览次数：次

返回列表

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

js中url编码与解码方法详解_javascript技巧

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

encodeURI：编码完整URL

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

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

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

示例：

立即学习“J*a免费学习笔记（深入）”；

星声AI

可分享的AI播客内容生成器和效率工具

185 查看详情星声AI

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 参数时对值进行处理

示例：

立即学习“J*a免费学习笔记（深入）”；

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 的结果），可能导致部分字符无法正确还原。

示例：

立即学习“J*a免费学习笔记（深入）”；

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编码与解码方法详解_j*ascript技巧的详细内容，更多请关注其它相关文章！

# 时用 # 从化区营销网站建设 # 云索seo矩阵 # 昆明网站seo优化哪家效果好 # 武汉图文营销推广方法 # 津南区营销推广渠道招聘 # 百度推广营销岗位有哪些 # 定制网站建设要求 # 塔城地网站推广 # 昆山企业网站怎么建设 # 烟台seo优化外包 # 内存管理 # 如何实现 # 如何用 # javascript # 如何使用 # 用它 # 这两个 # 适用于 # 学习笔记 # 特殊字符 # 常见问题 # 区别 # 编码 # 前端 # js # java