前端每日一学：掌握 URLSearchParams 优雅处理 URL 参数

前端每日一学：掌握 URLSearchParams 优雅处理 URL 参数

今日知识点：URLSearchParams 的深度应用

---

场景

你需要在前端 解析、构造或修改 URL 的查询参数，避免手动拼接字符串带来的编码问题。

---

基础用法

// 从当前 URL 获取参数
const params = new URLSearchParams(window.location.search);

// 从字符串创建
const params = new URLSearchParams('name=John&age=30');

// 从对象创建
const params = new URLSearchParams({ name: 'John', age: '30' });

---

核心方法

1. 获取参数

params.get('name'); // "John"（不存在返回 null）
params.getAll('tags'); // 返回数组（适用于同名参数）

2. 设置/删除参数

params.set('page', '2'); // 设置参数
params.append('tag', 'vue'); // 追加同名参数
params.delete('age'); // 删除参数

3. 转换为字符串

params.toString(); // "name=John&page=2&tag=vue"

4. 遍历参数

// 方式1：for...of
for (const [key, value] of params) {
  console.log(key, value);
}

// 方式2：forEach
params.forEach((value, key) => {
  console.log(key, value);
});

---

实战场景

场景1：合并多个参数对象

function mergeParams(...objs) {
  const params = new URLSearchParams();
  objs.forEach(obj => {
    Object.entries(obj).forEach(([key, value]) => {
      params.append(key, value);
    });
  });
  return params;
}

const merged = mergeParams(
  { page: 1 }, 
  { sort: 'date' }
);
// 结果：page=1&sort=date

场景2：对象与查询字符串互转

// 对象 → 查询字符串
const toQueryString = obj => 
  new URLSearchParams(obj).toString();

// 查询字符串 → 对象
const parseQueryString = str => 
  Object.fromEntries(new URLSearchParams(str));

场景3：自动处理数组参数

const params = new URLSearchParams();
params.append('tags', 'vue');
params.append('tags', 'react');
console.log(params.getAll('tags')); // ['vue', 'react']

场景4：URL 安全编码

// 自动处理特殊字符
const params = new URLSearchParams();
params.set('q', 'vue&react');
console.log(params.toString()); // "q=vue%26react"

---

对比传统方式

操作	传统方式（手动处理）	URLSearchParams
参数获取	正则匹配或 split 分割	.get() / .getAll()
参数设置	字符串拼接	.set() / .append()
编码处理	需手动调用 encodeURIComponent	自动处理
数组参数	需约定格式（如 tags[]=vue）	原生支持多值

---

注意事项

1. IE 兼容性：不支持 IE，需要 polyfill（如 url-search-params-polyfill）
2. 嵌套对象：无法直接处理嵌套结构，需自行序列化：

   // 手动处理嵌套对象
   params.set('filter', JSON.stringify({ price: { $gt: 100 } }));
   

---

明日预告：IntersectionObserver —— 如何高效实现懒加载与曝光统计？