处理URL查询参数时，window.location.href.split("?")数组为何自行变值？

看起来你在手动处理URL查询参数时遇到了split("?")数组意外变化的问题，这大概率是因为手动拼接URL容易出现编码、参数覆盖或者页面重载后状态不一致的情况。推荐用浏览器原生的URLSearchParams API来处理，它能帮你避免这些麻烦。

问题分析 #

直接用window.location.href.split("?")来拆分URL并手动修改参数，很容易因为以下原因出问题：

• 原URL的查询参数可能为空、顺序变化，或者存在特殊字符（比如%20这种编码后的空格）
• 页面重载后，split的结果会基于新的URL重新计算，导致你之前的操作逻辑混乱
• 手动拼接参数时容易遗漏编码，导致参数值异常

解决方案：使用URLSearchParams API #

这个API是专门用来处理URL查询参数的，能帮你轻松添加、修改和删除参数，还会自动处理编码问题。

完整代码示例 #

// 给所有name为"city"的单选按钮绑定change事件
document.querySelectorAll('input[name="city"]').forEach(radio => {
  radio.addEventListener('change', function() {
    // 只处理被选中的单选按钮
    if (this.checked) {
      // 创建URL对象，自动解析当前页面的URL
      const currentUrl = new URL(window.location.href);
      // 更新city参数的值为当前单选按钮的value
      currentUrl.searchParams.set('city', this.value);
      // 跳转到更新后的URL，实现页面重载
      window.location.href = currentUrl.toString();
    }
  });
});

关键说明 #

• URL对象会自动解析当前页面的路径和查询参数，不用手动拆分
• searchParams.set('city', value)：如果原URL已经有city参数，会直接替换它的值；如果没有，会自动添加这个参数
• 自动处理参数值的编码问题，比如如果城市名有空格或特殊字符，会自动转成URL安全的格式

为什么之前的split方法会出问题？ #

举个例子，当你第一次用split("?")得到数组["http://localhost:3001/offers", "category=Dining&sub_categories=Home%20Delivery&city="]，修改后拼接成新URL。但页面重载后，split("?")的结果会基于新的URL重新生成，如果你的逻辑没有正确同步这个变化，就会出现数组值“自行改变”的错觉。而用URLSearchParams则完全不需要担心这个问题，它始终基于当前最新的URL状态来操作。

内容的提问来源于stack exchange，提问作者Rajan Verma - Aarvy