JavaScript 操作 URL 的核心是 URL 和 URLSearchParams 接口：URL 解析完整 URL 为结构化对象，URLSearchParams 专门处理查询参数的增删改查并自动编码，修改后需手动赋值 url.search 才生效。
JavaScript 操作 URL 的核心是 URL 和 URLSearchParams 这两个原生接口，它们让解析和修改查询参数变得简单、安全、无需正则或手动拼接。
用 URL 构造函数解析完整 URL
把字符串转成结构化对象，能直接读取协议、域名、路径、哈希和查询参数：
const url = new URL('https://example.com/search?q=js&sort=date&tag=web#section1');
console.log(url.origin); // "https://example.com"
console.log(url.pathname); // "/search"
console.log(url.hash); // "#section1"
console.log(url.search); // "?q=js&sort=date&tag=web"
注意：url.search 是带问号的完整查询字符串；真正操作参数要用下面的 URLSearchParams。
用 URLSearchParams 解析和修改查询参数
URLSearchParams 是专门处理 search 部分的接口，支持增删改查，自动编码，不关心顺序：
立即学习“Java免费学习笔记（深入）”；
-
读取参数：用
get()（单值）、getAll()（允许多值）、has()判断是否存在 -
设置参数：用
set(key, value)—— 覆盖已有值；用append(key, value)—— 允许重复键（如?tag=a&tag=b） -
删除参数：用
delete(key)，可删单个或全部同名项 -
遍历参数：支持
for...of、entries()、keys()、values()
示例：
const params = new URLSearchParams(url.search);
params.get('q'); // "js"
params.set('page', '2'); // 添加 page=2 或覆盖
params.append('tag', 'tutorial'); // 新增一个 tag 参数
params.delete('sort'); // 移除 sort
console.log(params.toString()); // "q=js&tag=web&tag=tutorial&page=2"
把修改后的参数同步回 URL
修改完 URLSearchParams 后，需手动更新 URL 实例的 search 属性，再获取最终 URL 字符串：
url.search = params.toString(); // 同步到 URL 对象 console.log(url.href); // "https://example.com/search?q=js&tag=web&tag=tutorial&page=2#section1"
如果只是要跳转或发起请求，可直接用 url.href；若仅需查询字符串，用 params.toString() 即可。
兼容性与实用技巧
URL 和 URLSearchParams 在现代浏览器中已全面支持（Chrome 50+、Firefox 44+、Safari 10.1+、Edge 17+）。旧环境可用 polyfill 补齐。
- 中文、空格、特殊符号会自动编码，无需手动
encodeURIComponent - 从当前页面 URL 修改参数？用
new URL(window.location)初始化 - 想保留原有参数并追加？先
new URLSearchParams(location.search)，再set或append - 重置所有参数？直接
url.search = ''或params.delete(key)逐个删
不复杂但容易忽略：修改后记得赋值回 url.search，否则不会影响原始 URL 对象。
