URLSearchParams 可直接传入对象初始化并自动编码，支持 set/delete/append 动态操作参数，配合 replaceState 同步更新地址栏，避免手动拼接与重复编码。
URLSearchParams 是浏览器原生支持的 URL 查询参数操作工具，不用引入任何库就能干净地构建、增删改查过滤参数，比手动拼接字符串安全且不易出错。
如何用 URLSearchParams 从零生成带多维过滤参数的链接
直接传入对象或字符串初始化，它会自动编码值、处理空格和特殊字符。适合初始化商品筛选页（比如品牌、价格区间、分类、排序）：
const params = new URLSearchParams({
category: 'laptop',
brand: 'apple',
min_price: '1000',
max_price: '3000',
sort: 'price_desc'
});
const url = `/products?${params.toString()}`;
// → "/products?category=laptop&brand=apple&min_price=1000&max_price=3000&sort=price_desc"
- 传对象时，所有值会被自动调用
toString()，所以数字、布尔值都可直接写，无需手动转字符串 - 中文、空格、& 等字符会被正确编码，比如
brand: '小米'→brand=%E5%B0%8F%E7%B1%B3 - 避免用
encodeURI或encodeURIComponent预处理——URLSearchParams已内置，重复编码会导致乱码
如何动态添加、更新或删除某个过滤条件
修改参数不是重拼字符串，而是调用实例方法。尤其适合点击筛选项后局部更新 URL（如切换品牌、勾选“仅现货”）：
const params = new URLSearchParams(window.location.search);
// 添加或覆盖
params.set('in_stock', 'true');
// 删除某一项（比如取消价格范围）
params.delete('min_price');
params.delete('max_price');
// 批量设置多个（注意：会覆盖已有同名键）
params.set('sort', 'rating_desc');
// 同名键可多次 set，get() 只返回第一个，getAll() 返回全部（适用于多选场景，如多个 tag）
params.append('tag', 'gaming');
params.append('tag', 'lightweight');
-
set()是最常用操作：存在即更新，不存在即新增；不要用append()替代，否则可能产生重复键 - 多选类参数（如多个
tag）必须用append()，再配合getAll('tag')读取数组 - 删除前建议先
has()判断是否存在，避免无意义调用（虽无害，但逻辑更清晰）
如何同步更新地址栏且不触发页面刷新
用 history.replaceState() 替换当前 URL，保持页面状态不变，符合单页应用的筛选体验：
const newUrl = `${window.location.pathname}?${params.toString()}`;
history.replaceState(null, '', newUrl);
// 如果希望保留前进/后退记录，用 pushState()
// history.pushState(null, '', newUrl);
- 务必传入完整路径（含
window.location.pathname），不能只传查询参数，否则可能跳转到根路径 - 不加
replaceState或pushState，只改params对象本身不会影响地址栏 - 用户点浏览器后退时，需监听
popstate事件并重新解析URLSearchParams来恢复筛选状态
常见坑：值为空字符串、null、undefined 时的行为
URLSearchParams 对空值不敏感，但不同写法结果差异大，容易导致过滤失效：
const p = new URLSearchParams();
p.set('color', ''); // → color= （键存在，值为空字符串）
p.set('size', null); // → size=null （字面量 "null" 字符串）
p.set('type', undefined); // → type=undefined （字面量 "undefined" 字符串）
- 后端通常把空字符串
color=当作“不限颜色”，但把size=null当作具体值 “null”，可能查不到数据 - 真正想“移除该条件”，必须用
delete('color')，而不是set('color', '') - 从表单取值时，建议统一做空值清洗：
value || undefined不行，应写成value == null ? void 0 : value再判断是否delete
实际项目里，多维过滤往往涉及联动（比如选了分类才显示对应品牌），这时 URLSearchParams 本身不解决逻辑，但它保证参数操作这一层足够轻、足够稳——只要别在 set 前忘了删旧值，或把空字符串当删除用，基本就不会掉进 URL 解析的坑里。
