urlsearchparams 构造函数不支持直接传入普通对象，需用 object.entries() 配合 append() 添加参数；清空搜索参数应使用 url api 修改 search 属性并调用 history.replacestate，避免影响 hash 和路由状态；多值参数必须用 append() 而非 set()，中文等特殊字符无需手动编码，ssr 环境需判断 window 是否存在。
URLSearchParams 构造时直接传入对象会失效
很多人以为 new URLSearchParams({a: 1, b: 2}) 能直接生成 ?a=1&b=2，但实际它只接受字符串、URLSearchParams 实例或 FormData——传入普通对象会被转成 [object Object]，最终得到空参数或意外结果。
正确做法是先用 Object.entries() 拆解，再逐对追加：
const params = new URLSearchParams();
Object.entries({category: 'book', status: 'active', page: 2}).forEach(([k, v]) => {
params.append(k, v);
});
// → ?category=book&status=active&page=2
- 注意：若值为数组（如多选标签），需循环调用
append()，不能用set()，否则后项覆盖前项 -
append()允许重复键，set()会去重——多级过滤常需保留同名多值（如tag=js&tag=react），必须用append() - 值为
null或undefined时，append()会转成空字符串，建议提前过滤掉无效值
一键清空多级过滤参数要避开 location.replace 的跳转陷阱
想清空地址栏中所有业务参数（比如只保留 pathname，去掉所有 ?xxx），直接 location.replace(window.location.pathname) 看似简单，但容易误删 hash（如 #tab=detail）或破坏 SPA 路由状态。
更安全的做法是只清除 search 部分，保留 hash 和 pathname：
const url = new URL(window.location.href); url.search = ''; // 清空查询参数，不碰 hash 和 pathname history.replaceState(null, '', url);
- 用
history.replaceState而非location.replace，避免页面刷新和路由重载 - 如果项目用了 React Router / Vue Router，应优先调用其提供的
replace()方法（如router.replace({search: ''})），避免绕过路由系统导致状态不同步 - 清空前可先用
url.searchParams.has('category')判断是否存在某类过滤参数，实现“按需清空”而非全删
多级过滤参数的增删逻辑必须统一用 URLSearchParams 管理
用户点“取消筛选”“切换分类”“重置标签”时，如果混用字符串拼接或手动操作 window.location.search，极易出现参数遗漏、编码错误或键名大小写不一致等问题。
所有读写都应基于当前 URL 构建实例，再统一提交：
const url = new URL(window.location.href);
const params = url.searchParams;
// 删除某个过滤维度（如清空所有 tag=xxx）
for (const key of [...params.keys()]) {
if (key.startsWith('tag')) params.delete(key);
}
// 添加新状态（支持多值）
params.set('category', 'video');
params.append('tag', 'vue');
params.append('tag', 'ts');
history.replaceState(null, '', url);
- 不要用
params.delete('tag')直接删——它只删第一个匹配项；多值场景必须遍历 keys 或用正则预处理 - 中文或特殊字符无需手动
encodeURIComponent：URLSearchParams内部自动处理，手动编码反而会导致双重编码（如%25E4%25B8%25AD） - 若需保留某些基础参数（如
utm_source），清空前先提取并重建，避免误删
兼容性与 SSR 场景下 window.location 可能未定义
在 Next.js、Nuxt 等服务端渲染环境里，组件首次渲染时 window 不存在，直接访问 window.location 会报 ReferenceError。
安全写法是判断执行环境：
function getURL() {
if (typeof window === 'undefined') return new URL('http://localhost');
return new URL(window.location.href);
}
const url = getURL();
const params = url.searchParams;
// 后续操作照常
- Node.js 环境无法使用
URLSearchParams操作真实地址栏，但可以构造和序列化参数字符串用于 API 请求 - 部分老浏览器（IE）不支持
URL和URLSearchParams，需引入 polyfill（如core-js/stable/url和core-js/stable/url-search-params） - Vue/React 中，这类逻辑建议封装成自定义 Hook 或 Composable，把环境判断和 history 操作收口，避免每个组件重复处理
location.replace 就可能让 tab 切换失效或者锚点跳转错乱。每次操作前，先 new URL()，别图快直接字符串切。
