Livewire中数组形式查询字符串如何转为逗号分隔值格式

原生JavaScript实现 #

适用于浏览器端直接处理查询字符串的场景：

function convertIndexedQueryToComma(queryStr) {
  queryStr = queryStr.replace(/^\?/, '');
  const rawParams = new URLSearchParams(queryStr);
  const convertedParams = new URLSearchParams();
  const arrayParamMap = {};

  for (const [key, val] of rawParams.entries()) {
    const keyMatch = key.match(/^([a-zA-Z0-9_]+)\[\d+\]$/);
    if (keyMatch) {
      const baseKey = keyMatch[1];
      arrayParamMap[baseKey] = arrayParamMap[baseKey] || [];
      arrayParamMap[baseKey].push(val);
    } else {
      convertedParams.append(key, val);
    }
  }

  Object.entries(arrayParamMap).forEach(([baseKey, valList]) => {
    convertedParams.append(baseKey, valList.join(','));
  });

  return convertedParams.toString();
}

// 测试示例
const input = "topic[0]=economic&topic[1]=politic";
console.log(convertIndexedQueryToComma(input)); // 输出：topic=economic%2Cpolitic

注：输出中的%2C是逗号的标准URL编码，服务端接收时会自动解码为正常逗号，无需额外处理

Node.js 服务端实现 #

使用Node.js内置querystring模块处理：

const querystring = require('querystring');

function convertIndexedQueryToComma(queryStr) {
  queryStr = queryStr.replace(/^\?/, '');
  const parsedParams = querystring.parse(queryStr);
  const resultParams = {};
  const arrayParamMap = {};

  Object.entries(parsedParams).forEach(([key, val]) => {
    const keyMatch = key.match(/^([a-zA-Z0-9_]+)\[\d+\]$/);
    if (keyMatch) {
      const baseKey = keyMatch[1];
      arrayParamMap[baseKey] = arrayParamMap[baseKey] || [];
      arrayParamMap[baseKey].push(val);
    } else {
      resultParams[key] = val;
    }
  });

  Object.entries(arrayParamMap).forEach(([baseKey, valList]) => {
    resultParams[baseKey] = valList.join(',');
  });

  return querystring.stringify(resultParams);
}

Axios 请求自动转换 #

如果是使用Axios发送请求时需要直接生成逗号分隔的数组参数，可直接配置paramsSerializer，无需手动转换：

import axios from 'axios';
import qs from 'qs';

const api = axios.create({
  baseURL: '你的接口基础地址',
  paramsSerializer: params => qs.stringify(params, { arrayFormat: 'comma' })
});

// 调用时直接传数组类型参数即可
api.get('/your/api/path', {
  params: {
    topic: ['economic', 'politic']
  }
});
// 最终请求参数格式为：?topic=economic,politic

内容的提问来源于stack exchange，提问作者Yoga Cahya R.