HTML DOM URL searchParams 属性

HTML DOM 中的 URL 对象表示当前页面的 URL 地址，可以使用 URL 对象来访问和获取 URL 的各个组成部分。

URL.searchParams 属性可以访问 URL 的查询参数部分。这个属性是一个 URLSearchParams 对象，它提供了许多对查询参数进行处理的方法。

获取查询参数

可以使用 get() 方法获取指定名称的查询参数的值，例如：

const url = new URL("https://www.example.com/search?keywords=javascript&category=web");
const searchParams = url.searchParams;

const keywords = searchParams.get("keywords"); // "javascript"
const category = searchParams.get("category"); // "web"

如果查询参数不存在，get() 方法会返回 null。

设置查询参数

使用 set() 方法可以向 URL 中添加或修改查询参数的值，例如：

searchParams.set("page", "1");
searchParams.set("sort", "price_desc");

console.log(url.href);
// 输出：https://www.example.com/search?keywords=javascript&category=web&page=1&sort=price_desc

设置查询参数会覆盖已有的参数，如果要追加同名参数，可以使用 append() 方法。

删除查询参数

使用 delete() 方法可以删除指定名称的查询参数，例如：

searchParams.delete("category");

console.log(url.href);
// 输出：https://www.example.com/search?keywords=javascript&page=1&sort=price_desc

迭代查询参数

URLSearchParams 对象支持迭代，可以使用 for...of 循环遍历所有查询参数，例如：

for (const [name, value] of searchParams) {
  console.log(`${name}: ${value}`);
}

// 输出：
// keywords: javascript
// page: 1
// sort: price_desc

参考链接

• URL.searchParams - MDN