URLSearchParams是 JavaScript 提供的 URL 查询字符串处理工具，用于解析、操作和构建 URL 的查询参数（即 ?后面的部分）。它支持现代浏览器（IE 除外），是替代手动操作字符串的更优雅方案。

1. 基本用法

1.1 创建 URLSearchParams对象

// 方式1：从字符串创建
const params1 = new URLSearchParams("name=John&age=30");// 方式2：从键值对数组创建
const params2 = new URLSearchParams([["name", "John"],["age", "30"],["hobby", "coding"]
]);// 方式3：从对象创建（需手动转换）
const obj = { name: "John", age: "30" };
const params3 = new URLSearchParams(Object.entries(obj));

1.2 常用方法

方法

作用

示例

.get(key)

获取指定参数的值

params.get("name")→ "John"

.getAll(key)

获取所有同名参数的值（数组）

params.getAll("hobby")→ ["coding"]

.has(key)

检查参数是否存在

params.has("age")→ true

.set(key, value)

设置/覆盖参数

params.set("name", "Alice")

.append(key, value)

追加参数（可重复）

params.append("hobby", "music")

.delete(key)

删除参数

params.delete("age")

.toString()

转换为查询字符串

params.toString()→ "name=John&hobby=coding"

.keys()/ .values()/ .entries()

遍历键/值/键值对

[...params.entries()]→ [["name", "John"], ["hobby", "coding"]]

2. 实际应用场景

2.1 解析当前页面的查询参数

// 当前URL: https://example.com?name=John&age=30
const params = new URLSearchParams(window.location.search);
console.log(params.get("name")); // "John"
console.log(params.get("age"));  // "30"

2.2 构建 AJAX 请求的查询参数

const params = new URLSearchParams();
params.append("page", "1");
params.append("limit", "10");fetch(`https://api.example.com/data?${params}`).then(res => res.json());
// 实际请求URL: https://api.example.com/data?page=1&limit=10

2.3 处理表单数据

<form id="search-form"><input type="text" name="keyword" value="JavaScript"><input type="number" name="page" value="1">
</form><script>const form = document.getElementById("search-form");const params = new URLSearchParams(new FormData(form));console.log(params.toString()); // "keyword=JavaScript&page=1"
</script>

3. 特殊场景处理

3.1 处理数组参数

const params = new URLSearchParams();
params.append("color", "red");
params.append("color", "blue");
console.log(params.toString()); // "color=red&color=blue"// 获取所有值
console.log(params.getAll("color")); // ["red", "blue"]

3.2 处理空格和特殊字符

const params = new URLSearchParams();
params.set("query", "vue.js");
console.log(params.toString()); // "query=vue.js"（自动编码）// 手动解码
const decoded = decodeURIComponent(params.toString());

3.3 与 URL对象配合使用

const url = new URL("https://example.com/search");
const params = new URLSearchParams(url.search);
params.set("q", "前端开发");
url.search = params.toString();console.log(url.href); 
// "https://example.com/search?q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91"（自动编码中文）