一、 概述
在Web开发中，处理URL的查询字符串是一个常见任务。URLSearchParams API 提供了一种简单而强大的方法来处理Web URL的查询参数。它是一个内置的浏览器API，允许你以名称/值对的形式轻松地创建、读取、更新和删除查询参数。
二、URLSearchParams 的核心特性
- 易于使用：提供了简洁的接口来操作查询字符串。
- 链式调用：支持链式调用方法，使代码更简洁。
- 实时更新：对URLSearchParams对象所做的更改会实时反映到URL中。
- 兼容性：现代浏览器普遍支持，包括Chrome、Firefox、Safari和Edge。
三、 基本用法
1. 创建 URLSearchParams 对象
你可以通过几种方式创建URLSearchParams对象：
从现有查询字符串创建：
const queryString = new URLSearchParams(window.location.search);
从对象创建：
const params = new URLSearchParams({
name: 'John Doe',
age: 30
});
从数组创建：
const params = new URLSearchParams([
['name', 'John Doe'],
['age', '30']
]);
读取查询参数
使用get方法按名称获取查询参数的值：
const name = queryString.get('name'); // 获取'name'参数的值
设置查询参数
使用set方法设置查询参数的值：
queryString.set('name', 'Jane Doe'); // 设置或更新'name'参数的值
删除查询参数
使用delete方法删除查询参数：
queryString.delete('age'); // 删除'age'参数
获取所有参数的键值对
使用entries方法遍历所有参数：
for (const [key, value] of queryString.entries()) {
console.log(`${key}: ${value}`);
}
构建URL
使用toString方法将URLSearchParams对象转换为查询字符串：
const url = new URL('https://example.com');
url.search = queryString.toString();
console.log(url.href); // 输出完整的URL，包括查询字符串
四、高级用法
链式操作
URLSearchParams支持链式调用，使得参数的设置和删除更加方便：
const params = new URLSearchParams()
.set('page', 1)
.set('limit', 10)
.delete('sort')
.set('order', 'desc');
解析URL
使用URL构造函数和searchParams属性可以方便地解析URL的查询部分：
const url = new URL('https://example.com?name=John&age=30');
const params = url.searchParams;
console.log(params.get('name')); // 输出 'John'
动态更新URL
在单页应用(SPA)中，你可以使用URLSearchParams动态更新URL，而无需重新加载页面：
const params = new URLSearchParams(window.location.search);
params.set('filter', 'newValue');
history.pushState({}, '', `${window.location.pathname}?${params}`);
五、实战案例 - 接口调用传参
1.前端页面
//页面导出数据接口方法
export function exportDaily(data) {
// 假设你的data对象是这样的：{ date: '2023-03-15', region: 'beijing' }
// 我们需要将它转换为查询字符串
const queryParams = new URLSearchParams(data).toString();
// 构造完整的URL，包括查询参数
const url = `${import.meta.env.VITE_APP_API}/export?${queryParams}`;
// 使用window.open打开新的浏览器窗口或标签页
window.open(url, '_blank');
// 注意：出于安全和用户体验的原因，浏览器可能会阻止或限制非用户触发的弹出窗口。
// 因此，最好将此函数绑定到用户交互事件（如点击按钮）上。
}
2. 后端接口
@GetMapping("/export")
@ApiOperation(value = "导出 - 统计")
public void exportDaily(HttpServletResponse response, ExportVO vo){
//处理逻辑
// ...
};
总结
URLSearchParams是一个强大且灵活的API，它简化了在JavaScript中处理URL查询字符串的复杂性。无论是构建查询字符串，还是解析和更新浏览器当前URL的查询部分，URLSearchParams都提供了一种高效和易于使用的方法。
