URLSearchParams
是一个用于处理 URL 查询字符串的实用工具类。它提供了一系列方法,允许你轻松地创建、读取、编辑查询字符串,而无需手动解析和拼接字符串。
要使用 URLSearchParams
,可以像下面这样实例化一个新对象:
const params = new URLSearchParams();
你也可以在实例化时传递一个查询字符串:
const params = new URLSearchParams("name=John&age=30");
或者你可以传递一个 URL
对象的 search
属性:
const url = new URL("https://example.com?name=John&age=30");
const params = new URLSearchParams(url.search);
甚至可以传入一个键值对的二维数组或者是具有迭代特性(比如 Map)的对象:
const params = new URLSearchParams([["name", "John"], ["age", "30"]]);
// 或使用 Map 对象
const params = new URLSearchParams(new Map([["name", "John"], ["age", "30"]]));
以下是 URLSearchParams
常用的方法:
append(name, value)
: 添加一个新的参数。delete(name)
: 删除所有具有特定名称的参数。get(name)
: 获取指定名字的第一个参数值。getAll(name)
: 获取指定名字的所有参数值,作为一个数组。has(name)
: 检查是否存在特定名称的参数。set(name, value)
: 设置或更新参数的值。如果存在多个同名参数,则只保留第一个参数,其他的删除。sort()
: 按键名排序所有搜索参数。toString()
: 返回一个查询字符串,可以直接用于 URL。使用示例:
const params = new URLSearchParams();
params.append('name', 'John');
params.append('age', '30');
// 输出 name=John&age=30
console.log(params.toString());
// 获取参数值
console.log(params.get('name')); // 输出 John
// 检查参数存在
console.log(params.has('name')); // 输出 true
// 删除参数
params.delete('age');
console.log(params.toString()); // 输出 name=John
// 设置参数值
params.set('name', 'Jane');
console.log(params.toString()); // 输出 name=Jane
或
// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({
参数名1: 值1,
参数名2: 值2
})
// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果:参数名1=值1&参数名2=值2
URLSearchParams
非常适合处理复杂的查询字符串。对于需要在前端应用程序中动态操作 URL 查询字符串的情况,这是一个强大且简单的 API。在使用浏览器的fetch
API 或 XMLHttpRequest
发起网络请求时,URLSearchParams
也常常被用来构建查询字符串。