如何组合两个 URLSearchParams？

Question

我有两个

URLSearchParams

物体，我想将这两个物体组合起来制作第三个。

例如，我可以

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('orderBy', 'size');
params2.set('order', 'asc');

let params = params1 + params2; // yes, that's illegal, but how to do that?

我需要在 params 对象中包含所有 4 个参数。

我想使用 .entries() 方法迭代对象键值对，但 TypeScript 隐藏了此方法。这是我在

lib.dom.d.ts

文件中找到的内容：

interface URLSearchParams {
    append(name: string, value: string): void;
    delete(name: string): void;
    get(name: string): string | null;
    getAll(name: string): string[];
    has(name: string): boolean;
    set(name: string, value: string): void;
}

declare var URLSearchParams: {
    prototype: URLSearchParams;
    new (init?: string | URLSearchParams): URLSearchParams;
};

所以看起来在 TS 中没有可能迭代

URLSearchParams

的选项。有什么想法吗？

Answer 1

由于接受的解决方案是特定于 Angular 的，因此这里是一个可以与 vanilla JS 一起使用的解决方案：

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('page', 'two');
params2.set('orderBy', 'size');
params2.set('order', 'asc');

let combined = new URLSearchParams({
  ...Object.fromEntries(params1),
  ...Object.fromEntries(params2)
});

console.log(combined.toString());
// page=two&size=hundred&orderBy=size&order=asc

Answer 2

您可以使用

appendAll()

方法参见文档如下，

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('orderBy', 'size');
params2.set('order', 'asc');

let params = new URLSearchParams();
params.appendAll(params1);
params.appendAll(params2);
console.log(params);

现场演示

Answer 3

现在您已经弄清楚这是一个定义问题，以下是您其他困境的一些答案。

让参数=参数1+参数2； // 是的，这是非法的，但是该怎么做呢？

URLSearchParams 通过 toString() 转换为查询字符串。

let params = params1.toString() + params2.toString();

注意：URLSearchParams 创建一个搜索查询，其中数组转换等效于 array.toString() 例如：

q=x%2Cy%2Cz

，与 querystring.stringify() 输出不同，后者将键映射到数组中的每个值，例如

q=x&q=y&q=z

。如果您通过append/appendAll 合并URLSearchParams 并且有重复的键，则需要注意这一点。

要拥有重复的键，行为更像查询字符串，请使用迭代器创建。

let params = new URLSearchParams([
    ['page', 'one'],
    ['size', 'hundred'],
    ['orderBy', 'size'],
    ['order', 'asc']
]);

或者，

params.forEach((value, name[, searchParams]) => {})

也可用于迭代。

手动设置每个键值会错过此构造函数的最佳功能之一 - 它是解析功能！对于将参数附加到 URL 查询字符串来说，任何前导

?

都会被忽略。

let params1 = new URLSearchParams(('?page=one&size=hundred');
let params2 = new URLSearchParams({
    orderBy: 'size',
    order: 'asc'
});