URLSearchParams可高效管理地址栏多级过滤参数，支持按组写入、精准清空指定层级、静默更新URL并同步UI状态，且能封装为复用函数。
用
管理地址栏参数，既能清晰组织多级过滤条件（比如分类、价格区间、排序、页码），又能一键清空所有或指定层级的参数，无需手动拼接字符串或正则替换。
构建多级过滤参数：按业务逻辑分组写入
多级过滤通常对应不同维度：一级如
（商品类目）、
（品牌）；二级如
/
（价格区间）；三级如
（排序）、
（分页）。可先定义参数结构，再批量写入：
把过滤条件整理成对象，例如：
创建
实例，遍历对象写入：
保留当前 URL 的基础路径（不含查询参数），再拼上新参数：
一键清空：按“级”精准移除，不误伤其他参数
所谓“多级过滤”，意味着某些参数是强关联的（如
和
应同时存在或同时清除），而另一些是独立的（如
可单独重置）。清空时不应简单删光所有参数，而是按语义分组处理：
定义参数分组映射，例如：
清空某一级（如价格筛选）只需删掉对应键：
清空全部过滤参数（保留分页等非过滤类参数）：只删已知过滤字段，跳过
、
等：
同步更新地址栏 + 页面状态，避免跳转刷新
直接修改
会触发页面刷新，体验差。推荐用
静默更新 URL，并同步更新 UI 状态（如高亮选中项、重置表单）：
更新前保存当前参数快照（用于对比变化）：
生成新参数后，调用
更新地址栏：
随后触发自定义事件（如
），让组件响应新参数并重新拉取数据。
封装成可复用函数：传参即用，支持默认值与忽略项
把常用操作封装为工具函数，提升复用性与可维护性：
：写入时自动忽略空值，保留指定参数
：清空 price 组；
：清空指定键；
：清空全部过滤参数（按预设白名单）
内部自动处理
实例创建、
调用和事件派发，业务层只关注“做什么”，不操心“怎么做”
URLSearchParamscategorybrandprice_minprice_maxsortpage{ category: "laptop", price_min: "5000", sort: "sales_desc", page: "2" }URLSearchParamsconst params = new URLSearchParams();
Object.entries(filters).forEach(([k, v]) => v != null && params.set(k, v));const url = `${location.origin}${location.pathname}?${params}`;price_minprice_maxpageconst filterGroups = {
category: ["category", "brand"],
price: ["price_min", "price_max"],
sort: ["sort"],
pagination: ["page"]
};const params = new URLSearchParams(location.search);
filterGroups.price.forEach(key => params.delete(key));
history.replaceState(null, "", `${location.pathname}?${params}`);pageutm_*location.hrefhistory.replaceStateconst prev = Object.fromEntries(new URLSearchParams(location.search));replaceStatehistory.replaceState({ filters: newFilters }, "", `${location.pathname}?${params}`);filterchangesetFilters(filters, { keep: ["page"], ignoreEmpty: true })clearFilters("price")clearFilters(["category", "brand"])clearFilters()URLSearchParamsreplaceState