URL 和 URLSearchParams 解析查询参数更可靠简洁，自动处理编解码；支持从完整 URL 或纯查询字符串初始化，提供 get、getAll、set 等标准方法；现代浏览器原生支持，IE 可 polyfill 降级。
用 URL 和 URLSearchParams 解析查询参数，比写正则更可靠、更简洁、更易维护。浏览器原生支持，语义清晰，自动处理编码解码，无需手动 escape/unescape。
直接从完整 URL 提取参数
如果你有一条完整的 URL 字符串（比如来自 window.location.href 或接口返回的链接），可以直接用 URL 构造函数解析：
- 创建
URL实例后，其searchParams属性就是现成的URLSearchParams对象 - 支持
get()、getAll()、has()、forEach()等方法，行为标准且一致 - 自动解码参数值，不用再调
decodeURIComponent()
示例：
const url = new URL('https://example.com/search?q=hello%20world&tag=js&tag=web');
console.log(url.searchParams.get('q')); // 'hello world'
console.log(url.searchParams.getAll('tag')); // ['js', 'web']
console.log(url.searchParams.has('page')); // false
从纯查询字符串初始化参数
如果只有 ?key=value&foo=bar 这样的字符串（不含协议和路径），可直接传给 URLSearchParams 构造函数：
- 支持字符串、
URLSearchParams实例、数组或对象（ES2024+）作为输入 - 传入对象时，会自动将键值对转为查询参数（注意：仅支持一层扁平对象）
- 仍能使用全部方法，包括遍历、追加、删除、转换为字符串等
示例：
const params = new URLSearchParams('?q=test&sort=date');
// 或 const params = new URLSearchParams('q=test&sort=date');
// 或 const params = new URLSearchParams({ q: 'test', sort: 'date' });
params.append('page', '2');
params.delete('sort');
console.log(params.toString()); // 'q=test&page=2'
安全替换或构建 URL 查询参数
传统正则替换容易出错（比如误匹配 URL 路径或 fragment 中的内容），而 URL API 可精准操作查询部分：
- 修改
url.searchParams后，url.href自动更新，路径、hash 等其他部分不受影响 - 适合分页、筛选、排序等场景下的参数动态更新
- 避免手拼字符串导致的编码错误或注入风险
示例：更新当前页面的 page 参数
const url = new URL(window.location.href);
url.searchParams.set('page', '3');
window.history.replaceState({}, '', url); // 或 location.href = url
兼容性与降级建议
URL 和 URLSearchParams 在现代浏览器中已全面支持（Chrome 49+、Firefox 44+、Safari 10.1+、Edge 17+）。如需支持 IE，可用轻量 polyfill（如 url-search-params-polyfill）或封装简易 fallback：
- 检测是否存在
URLSearchParams，不存在则用正则 +split('&')手动解析（仅作兜底） - 日常开发中，优先使用原生 API，逻辑更直白，调试更方便
