urlsearchparams 是 javascript 原生接口，用于安全解析和构造 url 查询参数；适用于读取地址栏参数、拼接带参链接或动态更新搜索条件等场景。
URLSearchParams 是什么，什么时候该用它
它不是 HTML 标签，而是 JavaScript 原生的接口，用来安全、可靠地解析和构造 URL 查询参数（即 ?a=1&b=2 那部分）。如果你在写前端逻辑时需要读取地址栏参数、拼接带参链接、或动态更新搜索条件，URLSearchParams 就是标准解法——不用手写 split('&') 和正则去硬拆。
怎么从当前页面 URL 里读取查询参数
直接用 window.location.search 获取问号后的字符串，再传给 URLSearchParams 构造函数：
const params = new URLSearchParams(window.location.search);
console.log(params.get('id')); // 比如 URL 是 ?id=123&tab=home → 输出 '123'
console.log(params.has('tab')); // true
-
window.location.search开头自带?，URLSearchParams能正确处理，无需手动去掉 - 如果 URL 没有查询参数（
window.location.search是空字符串），构造依然安全，不会报错 -
get()找不到键时返回null，不是undefined；getAll()用于处理重复键（如?tag=a&tag=b）
怎么生成或修改查询参数并跳转到新 URL
构造实例后可增删改查，再用 toString() 转回字符串拼接到 URL 上：
const params = new URLSearchParams();
params.set('q', 'react');
params.append('sort', 'date');
params.delete('page');
// 生成完整跳转链接
const url = `/search?${params.toString()}`; // "/search?q=react&sort=date"
location.href = url;
-
set()会覆盖同名键，append()允许重复（如多选筛选项），二者行为不同，别混用 - 中文或特殊字符（如空格、
#）会被自动编码，toString()输出的是已编码结果，不用额外调encodeURIComponent - 不要直接拼接
location.href = '?a=1&b=2'，容易漏编码或破坏原有路径结构
常见错误和兼容性注意点
IE 完全不支持 URLSearchParams，其他现代浏览器都 OK。遇到兼容问题时，不要自己重写解析逻辑——用 官方推荐 polyfill 更稳妥。
- 错误：把整个 URL 传给构造函数 →
new URLSearchParams('https://a.com/?x=1')，结果是把整个字符串当键名处理，得到x%3D1这样的乱码 - 错误：对
params.get()返回值直接做数字运算 →params.get('page') + 1会变成字符串拼接（'2' + 1 → '21'），记得用Number()或一元加号 - Node.js 环境下没有
window，需用require('url').URLSearchParams（v10.0+）或第三方包
最易被忽略的是键名大小写敏感和空值处理：get('ID') 和 get('id') 不是一回事；?name= 的值是空字符串 ''，不是 null，判断时注意区分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
