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 的使用时机，能有效避免前端传参中的乱码和解析错误问题。不复杂但容易忽略细节。
以上就是JS中URL编码与解码方法详解_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534174.html
微信扫一扫 
支付宝扫一扫 
