urlsearchparams 构建查询参数更安全简洁，自动编码、支持重复键、空值转空字符串；可动态增删参数或从现有 url 解析修改；注意 falsy 值不会被忽略，需手动过滤。
用 URLSearchParams 构建 Fetch 请求的查询参数，比手动拼接字符串更安全、更简洁，还能自动处理编码和空值。
直接传给 fetch 的 URL 字符串
最常用的方式：把 URLSearchParams 实例直接作为查询部分拼接到 URL 后面，fetch 会原样发送。
- 创建实例时传入对象或数组，自动编码键值
- 支持重复键（如
?tag=a&tag=b），适合多选筛选 - 空字符串、
null、undefined会被转成空值，但不会被忽略（需手动过滤）
示例：
const params = new URLSearchParams({page: 2,
limit: 10,
keyword: "前端开发"
});
fetch(`/api/list?${params}`)
.then(r => r.json());
动态增删参数再生成字符串
适合需要根据条件添加/移除参数的场景，比如搜索表单联动。
- 用
.append()追加（支持同名多次） - 用
.set()覆盖（同名只保留最后一个） - 用
.delete()移除指定键 - 最后调用
.toString()得到标准查询字符串
示例：
const params = new URLSearchParams();params.append("sort", "updated");
if (category) params.append("category", category);
if (isHot) params.append("hot", "1");
fetch(`/api/posts?${params.toString()}`);
从现有 URL 中提取并修改参数
如果已有完整 URL，想复用路径 + 修改 query，可先解析再操作。
- 用
new URL(url)解析，其.searchParams是可读写对象 - 修改后直接用
url.toString()获取新地址 - 避免手动切分
?和#，兼容 fragment 和特殊字符
示例：
const url = new URL("https://api.example.com/data?offset=0&limit=20");url.searchParams.set("limit", "50");
url.searchParams.delete("offset");
url.searchParams.append("include", "meta");
fetch(url.toString()); // https://api.example.com/data?limit=50&include=meta
注意边界情况：空值与布尔值
URLSearchParams 不会跳过 falsy 值，null、undefined、false 都会被转为字符串字面量。
-
new URLSearchParams({ active: false })→"active=false" -
new URLSearchParams({ tag: null })→"tag=null" - 如需跳过空值，先过滤对象再传入
安全写法：
const cleanObj = Object.fromEntries(Object.entries({ page, keyword, category })
.filter(([, v]) => v != null && v !== "")
);
const params = new URLSearchParams(cleanObj);
