用 new url(location.href).searchparams.getall("tag") 读取重复的 tag 参数。返回值是按 url 中出现顺序排列的数组。若参数不存在，结果为空数组。

区分单值读取与多值读取

可以直接在浏览器控制台粘贴这段代码。

const url = new URL('https://example.com/search?tag=js&tag=go&page=2');
console.log(url.searchParams.get('tag'));
console.log(url.searchParams.getAll('tag'));
console.log(url.searchParams.getAll('missing'));

输出依次是 js、["js", "go"] 和空数组。page 只有一个值，可直接用 get。

立即学习“Java免费学习笔记（深入）”；

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

处理空参数和已编码字符

只拿到查询串时，可以直接构造 URLSearchParams。

const params = new URLSearchParams('?tag=&tag=C%2B%2B&tag=web+api');
const tags = params.getAll('tag').filter((value) => value !== '');
console.log(tags);

结果为 ["C++", "web api"]。解析器会处理百分号编码和查询串里的加号。是否去掉空值由业务决定。

把多选条件重新写回 URL

用 append 为同一个名字追加多个值，让筛选条件可分享。

const next = new URL('https://example.com/search?page=2');
for (const value of ['js', 'C++']) {
  next.searchParams.append('tag', value);
}
console.log(next.search);

查询串为 ?page=2&tag=js&tag=C%2B%2B。使用 set 会把同名参数替换为单个值。