URLSearchParams

作为前端开发经常要用到页面的传值等操作，比如最基本的get请求的query，今天介绍一个好用的Web API—URLSearchParams 。
URLSearchParams 是 JavaScript 中的一个 Web API，用于解析和操作 URL 查询字符串（Query String）。它提供了一种便捷的方式来处理 URL 中的参数（即 ? 后面的部分），例如：

https://example.com?name=John&age=30

这里的查询字符串是 name=John&age=30，可以用 URLSearchParams 来解析和操作。

---

1. 基本用法

创建 URLSearchParams 对象

方法 1：直接传入查询字符串

const params = new URLSearchParams('name=John&age=30');

方法 2：传入一个对象

const params = new URLSearchParams({ name: 'John', age: '30' });

方法 3：解析当前页面的查询字符串

const params = new URLSearchParams(window.location.search);

---

2. 常用方法

(1) 获取参数值

方法	说明	示例
.get(key)	获取指定参数的值	params.get('name') → 'John'
.getAll(key)	获取所有同名参数的值（数组）	params.getAll('tag') → ['a', 'b']
.has(key)	检查参数是否存在	params.has('age') → true

const params = new URLSearchParams('name=John&age=30&tag=a&tag=b');
console.log(params.get('name'));    // 'John'
console.log(params.getAll('tag'));  // ['a', 'b']
console.log(params.has('age'));     // true

---

(2) 修改参数

方法	说明	示例
.set(key, value)	设置参数（覆盖已有值）	params.set('age', '25')
.append(key, value)	添加参数（允许多个同名参数）	params.append('tag', 'c')
.delete(key)	删除参数	params.delete('age')

const params = new URLSearchParams('name=John&age=30');
params.set('age', '25');        // 覆盖 age
params.append('tag', 'a');      // 添加 tag
params.delete('name');          // 删除 nameconsole.log(params.toString()); // 'age=25&tag=a'

---

(3) 遍历参数

方法	说明	示例
.keys()	获取所有参数名	Array.from(params.keys()) → ['name', 'age']
.values()	获取所有参数值	Array.from(params.values()) → ['John', '30']
.entries()	获取所有键值对	Array.from(params.entries()) → [['name', 'John'], ['age', '30']]
for...of	直接遍历	for (const [key, value] of params) { ... }

const params = new URLSearchParams('name=John&age=30');
for (const [key, value] of params) {console.log(key, value); // 'name John', 'age 30'
}

---

(4) 转换为字符串

方法	说明	示例
.toString()	生成标准查询字符串	params.toString() → 'name=John&age=30'

const params = new URLSearchParams({ name: 'John', age: '30' });
const queryString = params.toString();
console.log(queryString); // 'name=John&age=30'

---

3. 实际应用示例

(1) 解析当前 URL 参数

// 假设 URL 是 https://example.com?name=John&age=30
const params = new URLSearchParams(window.location.search);
const name = params.get('name'); // 'John'
const age = params.get('age');   // '30'

(2) 动态构建查询字符串

const params = new URLSearchParams();
params.set('page', 1);
params.set('size', 10);
const url = `https://api.example.com/data?${params.toString()}`;
// 生成 URL: https://api.example.com/data?page=1&size=10

(3) 删除所有同名参数

const params = new URLSearchParams('tag=a&tag=b&tag=c');
params.delete('tag');
console.log(params.toString()); // ''

---

4. 注意事项

1. 参数编码：

   • URLSearchParams 会自动对特殊字符（如空格、中文）进行 URL 编码。
   • 例如：params.set('q', 'hello world') → q=hello%20world。

2. 大小写敏感：

   • 参数名是大小写敏感的，params.get('Name') 和 params.get('name') 可能不同。

3. 浏览器兼容性：

   • 现代浏览器均支持，但 IE 不支持（可用 qs 或手动解析替代）。

---

5. 总结

场景	方法
获取参数	.get(), .getAll(), .has()
修改参数	.set(), .append(), .delete()
遍历参数	.keys(), .values(), .entries(), for...of
生成查询字符串	.toString()

URLSearchParams 是处理 URL 查询字符串的标准工具，比手动解析更可靠、更便捷！