JavaScript处理URL参数生成filter数组：移除空值及冗余符号

你的问题根源在于手动拼接JSON字符串——这种方式不仅容易出错，还很难灵活过滤空值。更好的做法是先构建真实的JavaScript数组（自动筛选有效内容），最后再转成标准JSON字符串，这样就能完美得到你想要的格式。

修改后的代码实现 #

function init() {
  if (window.location.href.split("?")[1] != undefined) {
    const url = parse_query_string(window.location.href.split("?")[1]);
    const filter = [];

    // 处理List1：收集所有非空有效项
    const list1 = [];
    if (url.list1_1?.trim()) list1.push(url.list1_1);
    if (url.list1_2?.trim()) list1.push(url.list1_2);
    if (url.list1_3?.trim()) list1.push(url.list1_3);
    if (url.list1_4?.trim()) list1.push(url.list1_4);
    if (list1.length > 0) filter.push(list1);

    // 处理List2：复用相同逻辑
    const list2 = [];
    if (url.list2_1?.trim()) list2.push(url.list2_1);
    if (url.list2_2?.trim()) list2.push(url.list2_2);
    if (url.list2_3?.trim()) list2.push(url.list2_3);
    if (url.list2_4?.trim()) list2.push(url.list2_4);
    if (list2.length > 0) filter.push(list2);

    // 处理List3：复用相同逻辑
    const list3 = [];
    if (url.list3_1?.trim()) list3.push(url.list3_1);
    if (url.list3_2?.trim()) list3.push(url.list3_2);
    if (url.list3_3?.trim()) list3.push(url.list3_3);
    if (url.list3_4?.trim()) list3.push(url.list3_4);
    if (list3.length > 0) filter.push(list3);

    // 自动转成标准JSON格式，彻底避免手动拼接的语法问题
    const searchQueryString = `filter=${JSON.stringify(filter)}`;
    // 这里可以根据需求使用searchQueryString，比如打印或传给后端
    console.log(searchQueryString);
  }
}

关键改进点 #

1. 精准空值过滤：用?.trim()检查每个参数——既排除undefined，也排除空字符串（比如List1_2=这种无内容的情况）。
2. 结构化数组构建：为每个List创建独立子数组，只添加有效内容；子数组非空时才加入主filter数组，避免空数组占位。
3. 自动JSON序列化：用JSON.stringify()把数组转成标准JSON格式，完全规避手动拼接字符串带来的多余逗号、引号等语法错误。

测试验证 #

• 当输入为List1_1=test List1_2= List1_3=时，生成的searchQueryString是：filter=[["test"]]，完全符合预期。
• 当输入为List1_1=test List1_2=test List1_3=test List1_4=test List2_1=test List2_2=test List2_3= List2_4= List3_1=test List3_2= List3_3= List3_4=时，生成的是：filter=[["test","test","test","test"],["test","test"],["test"]]，完美匹配需求。

可扩展性优化（可选） #

如果以后要支持更多List（比如List4、List5），可以把重复逻辑封装成函数，减少冗余代码：

function getListItems(url, listPrefix) {
  const items = [];
  for (let i = 1; i <= 4; i++) {
    const key = `${listPrefix}_${i}`;
    if (url[key]?.trim()) items.push(url[key]);
  }
  return items;
}

// 在init函数中调用：
const list1 = getListItems(url, 'list1');
if (list1.length) filter.push(list1);
// list2、list3同理

这样代码更简洁，后续维护也更省心。

内容的提问来源于stack exchange，提问作者Laura Pomeroy