17370845950

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 部分的接口，支持增删改查，自动编码，不关心顺序：

• 读取参数：用 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 对象。