new URL()和new URLSearchParams()的简要汇总-DS

new URL()
用途：解析和操作 URL 字符串，提取或修改 URL 的各个组成部分。
创建方式：

const url = new URL(“https://example.com/path?name=John#section”);

常用属性和方法：
属性/方法 说明
url.protocol 协议（如 https:）
url.host 主机（如 example.com:8080）
url.pathname 路径（如 /path）
url.search 查询参数（如 ?name=John）
url.hash 哈希（如 #section）
url.origin 协议 + 主机 + 端口（只读）
url.searchParams 关联的 URLSearchParams 对象
url.toString() 返回完整的 URL 字符串

示例：
url.pathname = “/new-path”; // 修改路径
url.searchParams.set(“age”, “30”); // 通过 searchParams 修改查询参数
console.log(url.href); // “https://example.com/new-path?name=John&age=30#section”

new URLSearchParams()
用途：操作 URL 的查询参数（?key=value 部分），支持增删改查。

创建方式：
// 从字符串、对象或键值对创建
const params = new URLSearchParams(“name=John&age=30”);
// 或
const params = new URLSearchParams({ name: “John”, age: “30” });

常用方法：
方法 说明
params.get(key) 获取第一个匹配的值
params.getAll(key) 获取所有同名参数的值（数组）
params.append(key, value) 添加参数（保留同名参数）
params.set(key, value) 覆盖或新增参数（删除同名参数）
params.delete(key) 删除指定参数
params.has(key) 检查是否存在参数
params.toString() 转换为查询字符串（如 name=John&age=30）

示例：
params.append(“city”, “NewYork”);
params.delete(“age”);
console.log(params.toString()); // “name=John&city=NewYork”

关键联动
URL 与 URLSearchParams 结合使用：
const url = new URL(“https://example.com”);
url.searchParams.set(“page”, “2”); // 直接操作查询参数
console.log(url.href); // “https://example.com/?page=2”

处理重复参数：
const params = new URLSearchParams(“tag=js&tag=css”);
console.log(params.getAll(“tag”)); // [“js”, “css”]