URLSearchParams是JavaScript中用于处理URL查询参数的内置对象，可解析、构造、修改和遍历查询字符串。支持通过查询字符串、键值对对象或当前URL创建实例，自动编码确保合法性。提供get、getAll、append、set、delete、has和toString等方法，便于动态操作参数。常用于GET请求拼接参数或POST请求发送application/x-www-form-urlencoded数据，结合Fetch API使用更安全高效，并可通过for...of遍历调试，是现代Web开发中管理查询参数的实用工具。
在JavaScript中处理URL查询参数时，URLSearchParams 是一个非常实用的内置对象。它让开发者可以轻松地解析、构造、修改和遍历URL中的查询字符串，特别适用于网络请求中动态构建或读取参数。
创建URLSearchParams实例
你可以通过多种方式创建一个 URLSearchParams 对象：
- 传入查询字符串：new URLSearchParams('name=John&age=25')
- 传入 FormData-like 的键值对对象：new URLSearchParams({name: 'John', age: '25'})
- 从当前页面URL中提取：new URLSearchParams(window.location.search)
注意：构造函数接收的值都会被自动编码，避免出现非法字符问题。
常用方法与操作
URLSearchParams 提供了一系列直观的方法来操作参数：
立即学习“Java免费学习笔记（深入）”；
-
get(key)：获取指定键的第一个值
例如：params.get('name') 返回 "John" -
getAll(key)：获取指定键的所有值（适用于重复键）
例如：params.getAll('tag') 返回数组 ['js', 'web'] - append(key, value)：添加一个新的键值对（允许重复键）
- set(key, value)：设置键的值，如果存在则覆盖，否则创建
- delete(key)：删除指定键的所有值
- has(key)：判断是否存在指定键
- toString()：返回序列化的查询字符串，可用于拼接到URL中
例如，在发送网络请求前动态添加参数：
const params = new URLSearchParams();params.append('q', 'javascript');
params.set('limit', '10');
fetch('/api/search?' + params.toString())
.then(response => response.json())
.then(data => console.log(data));
结合Fetch API使用
在网络请求中，尤其是GET请求，URLSearchParams 能有效避免手动拼接字符串带来的错误。
示例：根据用户输入发起搜索请求
function searchUsers(query, page = 1) {const params = new URLSearchParams();
params.set('q', query);
params.set('page', page);
return fetch(`/api/users?${params}`)
.then(res => res.json());
}
searchUsers('前端开发', 2);
如果是POST请求，也可以将参数转为字符串发送（如 application/x-www-form-urlencoded）：
const data = new URLSearchParams();data.set('username', 'test');
data.set('password', '123456');
fetch('/login', {
method: 'POST',
body: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
遍历与调试
你可以像操作普通对象一样遍历 URLSearchParams：
for (const [key, value] of params) {console.log(key, value);
}
这在调试或日志输出时非常有用。
基本上就这些。URLSearchParams 简化了查询参数的管理，是现代JavaScript网络请求中不可或缺的工具之一。不复杂但容易忽略。
