URLSearchParams

URLSearchParams

URLSearchParams 是一种 JavaScript 接口，用于处理和构造 URL 中的查询参数。这种接口让你能解析、操作和生成 URL 查询字符串中的参数。以下是对 URLSearchParams 的解释：

1. 创建 URLSearchParams 对象

URLSearchParams 可以从一个查询字符串、URL 或者一个键值对对象创建。

// 从查询字符串创建
const params1 = new URLSearchParams("name=John&age=30");


// 从 URL 创建
const url = new URL("https://example.com/?name=John&age=30");
const params2 = new URLSearchParams(url.search);

// 从键值对对象创建
const params3 = new URLSearchParams({ name: "John", age: "30" });

2. 获取参数（重要）

你可以使用 get 方法获取特定参数的值。

console.log(params1.get("name")); // "John"
console.log(params1.get("age"));  // "30"

3. 设置参数

可以使用 set 方法设置或更新参数。

params1.set("name", "Jane");
console.log(params1.toString()); // "name=Jane&age=30"

4. 添加参数

使用 append 方法可以向查询字符串添加参数。

params1.append("hobby", "reading");
params1.append("hobby", "swimming");
console.log(params1.toString()); // "name=Jane&age=30&hobby=reading&hobby=swimming"

5. 删除参数

delete 方法可以删除特定参数。

params1.delete("age");
console.log(params1.toString()); // "name=Jane&hobby=reading&hobby=swimming"

6. 检查参数是否存在

使用 has 方法可以检查查询字符串中是否存在特定参数。

console.log(params1.has("name")); // true
console.log(params1.has("age"));  // false

7. 遍历参数

可以使用 forEach 方法遍历查询参数。

params1.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// Output:
// name: Jane
// hobby: reading
// hobby: swimming

8. 将 URLSearchParams 转换为查询字符串

使用 toString 方法将 URLSearchParams 对象转换为标准查询字符串。

console.log(params1.toString()); // "name=Jane&hobby=reading&hobby=swimming"

总结

URLSearchParams 用于在 Web 应用程序中操作 URL 查询参数。通过它，可以创建、读取、添加、更新、删除和遍历查询参数，帮助你在前端和后端之间传递数据，以及处理动态 URL。