最安全推荐的方式是使用 URLSearchParams API，它自动编码、过滤 null/undefined、支持多值同名参数；可构造实例逐个 append，或传入对象批量初始化，兼容现代浏览器；旧版 IE 需手动实现编码逻辑。
在 JavaScript 中，fetch 请求动态拼接 Query 参数最安全、推荐的方式是使用 URLSearchParams API —— 它自动处理编码、空值、数组等边界情况，避免手拼字符串导致的乱码或注入风险。
用 URLSearchParams 构造查询字符串
这是现代浏览器（包括 Edge 16+、Chrome 49+、Firefox 44+、Safari 10.1+）原生支持的标准方法，兼容性足够好，且语义清晰：
const params = new URLSearchParams();
params.append('page', 1);
params.append('limit', 20);
params.append('keyword', '前端开发');
params.append('tags', 'js');
params.append('tags', 'fetch'); // 多值同名参数自动支持
const url = `https://api.example.com/list?${params.toString()}`;
fetch(url)
.then(res => res.json())
.then(data => console.log(data));
从对象批量初始化参数
如果参数来自一个对象（比如表单数据或配置），可直接传入对象初始化 URLSearchParams：
const query = {
page: 1,
limit: 20,
keyword: 'fetch',
active: true, // 布尔值会被转为字符串 "true" / "false"
category: null // null/undefined 会被忽略（不会生成 key=）
};
// 自动过滤掉 undefined 和 null，并对值做 encodeURIComponent
const params = new URLSearchParams(query);
const url = `https://api.example.com/search?${params}`;
处理数组参数（如多选标签）
后端常见需要多个同名参数（如 ?tag=a&tag=b），URLSearchParams 天然支持多次 append，也支持传入数组（需手动展开）：
- 方式一：循环追加（推荐，逻辑明确）
const tags = ['react', 'vue', 'svelte'];
const params = new URLSearchParams();
tags.forEach(tag => params.append('tag', tag));
- 方式二：用
forEach+entries()批量处理复杂对象（含数组）
const filters = {
status: 'published',
tags: ['js', 'ts'],
ids: [101, 205]
};
const params = new URLSearchParams();
Object.entries(filters).forEach(([key, value]) => {
if (Array.isArray(value)) {
value.forEach(v => params.append(key, v));
} else {
params.append(key, value);
}
});
兼容旧浏览器（如 IE）的降级方案
若必须支持 IE，可手写一个轻量函数，核心是用 encodeURIComponent 安全编码每个键和值：
function buildQuery(obj) {
return Object.keys(obj)
.filter(key => obj[key] !== undefined && obj[key] !== null)
.map(key => {
const val = obj[key];
if (Array.isArray(val)) {
return val.map(v => `${encodeURIComponent(key)}=${encodeURIComponent(v)}`).join('&');
}
return `${encodeURIComponent(key)}=${encodeURIComponent(val)}`;
})
.join('&');
}
// 使用
const url = `https://api.example.com/data?${buildQuery({ q: 'hello world', type: 'json' })}`;
不复杂但容易忽略的是：永远别用字符串模板或 + 拼接未编码的参数，否则空格、中文、&、= 等字符会导致请求失败或服务端解析错误。
