为何JavaScript中URL首个查询参数未被识别？

原代码示例 #

const url = new URLSearchParams('https://example.com?q1=1&q2=2');
console.log(url.has('q3')) // returns false as expected
console.log(url.has('q2')) // returns true as expected
console.log(url.has('q1')) // returns false as NOT expected

问题原因 #

核心问题是URLSearchParams构造函数的参数使用错误：

• URLSearchParams的设计目标是接收URL中?之后的查询参数字符串，而非完整URL。
• 当传入完整URL时，它会将整个字符串按查询参数规则解析：把https://example.com?q1识别成一个参数键，对应值为1，而q2是第二个正常解析的参数。
• 此时参数结构实际为{"https://example.com?q1": "1", "q2": "2"}，自然找不到键为q1的参数，所以url.has('q1')返回false。

修复方案 #

有两种可靠的修复方式：

1. 直接传入查询参数字符串（?之后的部分）

const urlParams = new URLSearchParams('q1=1&q2=2');
console.log(urlParams.has('q1')); // 返回true

2. 先通过URL对象解析完整URL，再提取查询参数（更适合处理完整URL场景）

const fullUrl = new URL('https://example.com?q1=1&q2=2');
const urlParams = fullUrl.searchParams;
console.log(urlParams.has('q1')); // 返回true

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