如何在JavaScript中生成含重复查询键多值对的URL？

你遇到的问题是因为URLSearchParams处理对象中的数组时，默认会把数组转换成逗号分隔的字符串，而不是生成多个同名的键值对。要得到?a=b&a=c&d=e这种格式，有两种简单的解决方法：

方法1：使用二维数组初始化URLSearchParams #

URLSearchParams支持接收一个二维数组作为参数，其中每个子数组代表一组键值对。这样相同的键可以重复出现，从而生成你想要的格式：

const url = new URL('http://example.com/hoge');
url.search = new URLSearchParams([
  ['a', 'b'],
  ['a', 'c'],
  ['d', 'e']
]);
console.log(url.href); // 输出: http://example.com/hoge?a=b&a=c&d=e

方法2：使用append()方法逐个添加参数 #

如果你需要动态添加参数（比如从数组循环生成），可以先创建空的URLSearchParams对象，然后用append()方法逐个添加键值对。注意不要用set()方法，因为set()会覆盖同名键的已有值：

const url = new URL('http://example.com/hoge');
const params = new URLSearchParams();

// 给a键添加多个值
params.append('a', 'b');
params.append('a', 'c');
// 添加d键的值
params.append('d', 'e');

url.search = params;
console.log(url.href); // 同样输出目标URL

为什么原来的写法不行？ #

当你传入{ 'a': ['b', 'c'], 'd': 'e' }这种对象给URLSearchParams时，它会把每个属性值调用toString()方法转换为字符串。数组['b','c']调用toString()后就变成了"b,c"，所以最终生成了a=b,c的格式，这不符合你的需求。

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