JavaScript处理URL参数最现代可靠的方式是使用URL和URLSearchParams API；前者解析完整URL获取结构化信息，后者专门操作查询参数，支持增删改查及自动编码，还可结合window.location安全更新地址栏。
JavaScript 处理 URL 参数最现代、可靠的方式是使用内置的 URL 和 URLSearchParams API，它们取代了过去手动解析字符串的易错做法。
用 URL 构造函数解析完整 URL
当你有一个完整的 URL 字符串（比如来自 window.location.href 或用户输入），可以用 new URL() 提取协议、域名、路径、查询参数等结构化信息：
- const url = new URL("https://example.com/search?q=js&sort=desc&page=2");
- console.log(url.hostname); // "example.com"
- console.log(url.pathname); // "/search"
- console.log(url.search); // "?q=js&sort=desc&page=2"
- console.log(url.searchParams); // URLSearchParams 实例
用 URLSearchParams 解析和操作查询参数
URLSearchParams 是专门处理 ?key=value&key2=value2 这类查询字符串的对象，支持增删改查，自动处理编码：
- const params = new URLSearchParams(url.search);
- params.get("q"); // "js"
- params.getAll("page"); // ["2"]（支持重复键）
- params.set("sort", "asc"); // 修改值
- params.append("filter", "active"); // 追加新参数
- params.delete("page"); // 删除参数
- params.toString(); // "q=js&sort=asc&filter=active"
在浏览器中读写当前页面 URL 参数
结合 window.location 可以安全更新地址栏而不刷新页面：
立即学习“Java免费学习笔记（深入）”；
- const url = new URL(window.location);
- url.searchParams.set("utm_source", "newsletter");
- window.history.replaceState({}, "", url); // 替换当前历史记录
- // 或用 pushState() 添加新历史项
兼容性与降级建议
URL 和 URLSearchParams 在现代浏览器（Chrome 61+、Firefox 60+、Safari 10.1+、Edge 79+）中已全面支持。如需兼容旧版 IE，可用 polyfill（如 webreflection/url-search-params），或封装一个简单 fallback 函数解析 location.search 字符串。
