如何利用JavaScript解决href参数传递乱码问题？

为什么URL参数传递会出现乱码？
当通过href传递参数时，如果参数中包含特殊字符（如空格、中文、符号等），浏览器可能因未正确编码而将其转换为乱码。

<a href="page.html?name=张三&city=北京">链接</a>

若未编码,张三和北京可能显示为%E5%BC%A0%E4%B8%89或乱码字符，这是因为URL仅支持ASCII字符，非ASCII字符需通过URL编码转换为%xx格式。

JavaScript如何解决参数乱码问题？
通过encodeURIComponent()和decodeURIComponent()函数实现编码与解码。

编码参数（发送前）
在拼接URL时，使用encodeURIComponent()对参数值编码：

const name = "张三";
const city = "北京";
const url = `page.html?name=${encodeURIComponent(name)}&city=${encodeURIComponent(city)}`;
document.querySelector('a').href = url;

编码后URL变为：

page.html?name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

解码参数（接收时）
使用decodeURIComponent()解析参数：

// 假设当前URL为 page.html?name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC
const params = new URLSearchParams(window.location.search);
const name = decodeURIComponent(params.get('name')); // 输出：张三
const city = decodeURIComponent(params.get('city')); // 输出：北京

其他编码方法对比

• encodeURI() vs encodeURIComponent()

  • encodeURI()：编码整个URL，保留:/?#[]@等符号，适用于完整URL。
  • encodeURIComponent()：编码参数值，转义更多字符（如&和），适合URL参数部分。

• 手动替换（不推荐）
  部分开发者会用replace()处理空格（%20），但无法覆盖所有特殊字符，易遗漏。

常见问题与注意事项

1. 多次编码问题
   避免重复调用编码函数，否则会导致被二次编码为%25。
2. 跨页面传输
   确保发送端和接收端均使用一致的编码/解码方法。
3. 框架限制
   部分框架（如Vue Router、React Router）已内置参数编码逻辑，需查阅文档适配。
4. 特殊符号处理
   符号在URL中代表空格，若需保留，需显式编码为%2B。

现代浏览器的兼容方案
推荐使用URLSearchParams对象简化操作：

const params = new URLSearchParams();
params.append('name', '张三');
params.append('city', '北京');
const url = `page.html?${params.toString()}`; // 自动编码参数

此方法自动处理编码,且兼容主流浏览器（IE需Polyfill）。

URL参数乱码的核心原因是未正确编码非ASCII字符，通过JavaScript的encodeURIComponent()和decodeURIComponent()可高效解决，开发时需注意编码一致性、特殊符号处理及框架特性，结合现代API（如URLSearchParams）提升代码可维护性。

引用说明

• URL编码标准参考自 RFC 3986。
• encodeURIComponent文档详见 MDN Web Docs。