以角度设置 URL 参数 - TypeScript

在 TypeScript 中，我们可以通过不同的角度来设置 URL 参数。常用的角度包括：

• 使用字符串拼接方式
• 使用 URLSearchParams
• 使用第三方库如 qs

使用字符串拼接方式

字符串拼接是最基本的设置 URL 参数的方式。我们可以使用字符串拼接符 +，将参数依次拼接起来。

示例代码：

const id = 123;
const name = 'Alice';
const url = `https://example.com?id=${id}&name=${name}`;
console.log(url); // 输出 https://example.com?id=123&name=Alice

上述代码中，我们使用了模板字符串，将参数拼接到 URL 中。

这种方式简单易懂，但对于参数数量较多的情况，代码会变得冗长且不易维护。

使用 URLSearchParams

URLSearchParams 是一个内置的 API，用于管理 URL 查询参数。我们可以使用它来方便地设置和操作 URL 参数。

示例代码：

const params = new URLSearchParams();
params.append('id', '123');
params.append('name', 'Alice');
const url = `https://example.com/?${params.toString()}`;
console.log(url); // 输出 https://example.com/?id=123&name=Alice

上述代码中，我们首先创建了一个 URLSearchParams 对象，并使用 append() 方法向该对象中添加参数。最后，我们将 URLSearchParams 对象转换为字符串，拼接到 URL 中。

使用 URLSearchParams 方式可以方便地添加、删除参数，也支持处理多个同名参数。

使用第三方库如 qs

另外一种设置 URL 参数的方式是使用第三方库，如 qs。该库提供了一组 API，可用于解析和字符串化 URL 参数。

示例代码：

import qs from 'qs';

const params = {
  id: 123,
  name: 'Alice',
};
const url = `https://example.com/?${qs.stringify(params)}`;
console.log(url); // 输出 https://example.com/?id=123&name=Alice

上述代码中，我们首先定义了一个包含参数的对象，然后使用 qs.stringify() 方法将该对象转换为字符串，并拼接到 URL 中。

qs 库支持处理数组和对象等多种类型的参数，并提供了可定制的选项，使得我们能够更好地控制参数的编码过程。

总之，以上三种方法都可以用来设置 URL 参数，我们可以根据具体的情况选择适合自己的方式。