URLSearchParams: 浏览器中的查询字符串处理利器

一、 概述

在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都提供了一种高效和易于使用的方法。