JavaScript动态拼接查询参数的核心是智能过滤与结构化处理：先用对象收集条件，再通过通用函数过滤无效值并编码，支持数组展开和嵌套扁平化，或使用URLSearchParams简化基础场景。
JavaScript 动态拼接复杂查询参数的核心是：把用户输入的条件转换成键值对，过滤掉无效值（如空字符串、null、undefined、空数组等），再按需编码并组合成 URL 查询字符串。关键不在“拼接”，而在“智能过滤”和“结构化处理”。
用对象收集条件，再统一过滤和编码
避免手动字符串拼接（如 "?a="+a+"&b="+b），容易出错且难维护。推荐先用普通对象收纳所有可能的参数：
const filters = {
keyword: inputKeyword.value.trim(),
category: selectCategory.value || undefined,
status: Array.from(statusCheckboxes).filter(cb => cb.checked).map(cb => cb.value),
page: Number(inputPage.value) || 1,
sort: selectSort.value === 'default' ? undefined : selectSort.value
};
然后写一个通用函数，自动跳过无效值，并对值做 encodeURIComponent：
function buildQuery(params) {
return Object.entries(params)
.filter(([, value]) => {
if (value == null) return false;
if (typeof value === 'string') return value.trim() !== '';
if (Array.isArray(value)) return value.length > 0;
return true; // number, boolean 等非空原始值
})
.map(([key, value]) => {
if (Array.isArray(value)) {
return value.map(v => `${encodeURIComponent(key)}=${encodeURIComponent(v)}`).join('&');
}
return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
})
.join('&');
}
// 使用
const query = buildQuery(filters); // "keyword=js&status=active&status=draft&page=1"
支持数组参数和嵌套结构（如分页、多选）
后端常要求数组以 key=value1&key=value2 形式接收（而非 key[]=value1&key[]=value2）。上面的 buildQuery 已处理了数组展开。若需支持更复杂结构（如带范围的 price[min]=100&price[max]=500），可扩展对象设计：
立即学习“Java免费学习笔记（深入）”；
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const filters = {
price: { min: inputMin.value, max: inputMax.value },
tags: ['vue', 'react']
};
// 改造 buildQuery 支持扁平化嵌套
function buildQuery(params, prefix = '') {
const pairs = [];
for (const [key, value] of Object.entries(params)) {
const fullKey = prefix ? `${prefix}[${key}]` : key;
if (value == null) continue;
if (typeof value === 'object' && !Array.isArray(value)) {
pairs.push(...buildQuery(value, fullKey));
} else if (Array.isArray(value)) {
value.forEach(v => pairs.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(v)}`));
} else {
pairs.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(value)}`);
}
}
return pairs;
}
// 结果示例：["price[min]=100", "price[max]=500", "tags=vue", "tags=react"]
const query = buildQuery(filters).join('&');
结合 URLSearchParams（现代简洁方案）
如果只需基础功能且兼容性允许（Chrome 49+，Firefox 44+，Safari 10.1+），URLSearchParams 是最轻量可靠的选择：
const params = new URLSearchParams();
if (keyword) params.append('keyword', keyword);
if (category) params.append('category', category);
// 多选：循环添加同名键
statusSelected.forEach(s => params.append('status', s));
// 自动编码，无需手动处理
const query = params.toString(); // "keyword=hello&category=tech&status=active&status=draft"
注意：URLSearchParams 不原生支持嵌套或对象，但对大多数表单筛选场景已足够。需要嵌套时，仍建议用前两种方法。
封装成可复用的 Hook 或工具函数
在 React 中可封装为自定义 Hook，在 Vue 或纯 JS 项目中可导出工具函数。关键是把「条件收集」和「查询生成」解耦：
- 监听表单变化时调用
updateFilters()更新内部状态对象 - 每次请求前调用
toQueryString(filters)生成最终参数 - 支持可选配置：是否忽略空字符串、是否启用数组重复键、是否保留布尔值
true/false字符串
不复杂但容易忽略细节：比如中文字符必须编码、空格要转成 %20 而不是 +（URLSearchParams 默认用 %20，更规范）、数字 0 和布尔 false 是否应被过滤——这些都得按业务约定明确处理。
