URL含#时URLSearchParams无法获取首个参数的问题求助

嘿，这个问题我之前碰到过，其实不是URLSearchParams的Bug，是咱们对URL结构的理解有点偏差，我来给你捋清楚：

问题根源 #

首先得明确URL的标准结构：查询参数（就是?后面的部分）是在哈希片段（#及后面的内容）之前的。如果你的查询参数不小心写在了#后面，那它本质上属于哈希的一部分，而非标准的查询参数，URLSearchParams自然识别不了。

举个直观的例子：

• 错误结构：https://your-site.com/page#id=123&name=test
  这里id=123&name=test是哈希片段的内容，不是查询参数
• 正确结构：https://your-site.com/page?id=123&name=test#section-1
  这里?id=123&name=test才是正经的查询参数，#section-1是哈希

解决方案 #

分两种情况处理：

情况1：URL确实需要把参数放在哈希里（比如前端路由场景） #

如果是业务需求导致参数在哈希后面，那可以手动提取哈希部分再解析：

// 先把哈希开头的#去掉，再传给URLSearchParams
const hashParams = new URLSearchParams(window.location.hash.slice(1));
// 正常获取参数
const firstParam = hashParams.get('id');

情况2：URL结构写错了 #

如果是不小心把参数放在了#后面，那调整URL结构，把查询参数移到#之前，就能正常用URLSearchParams了：

// 正确URL下的常规用法
const params = new URL(window.location.href).searchParams;
const firstParam = params.get('id');

真遇到Bug该去哪反馈？ #

如果你确认自己的URL完全符合标准，但URLSearchParams还是无法解析，那可以去这些官方渠道提交反馈：

• Chromium内核浏览器（Chrome、Edge等）：Chromium官方Bug跟踪平台
• Firefox：Mozilla的Bugzilla平台
• Web标准层面：WHATWG的官方GitHub仓库

内容的提问来源于stack exchange，提问作者Jeremy