TypeScript 读取 URL 搜索参数

在 TypeScript 中，我们可以使用 URLSearchParams 对象来读取 URL 的搜索参数。URLSearchParams 是浏览器原生的 API，可以用于解析和构建 URL 查询字符串。下面是一些示例代码，展示了如何使用 TypeScript 读取 URL 搜索参数。

导入 URLSearchParams

首先，我们需要导入 URLSearchParams 类型，以便在 TypeScript 中使用它。

// 导入 URLSearchParams 类型
import { URLSearchParams } from 'url';

读取 URL 搜索参数

接下来，我们可以创建一个 URLSearchParams 对象，并将 URL 字符串传递给它的构造函数。然后，我们可以使用 get 方法来读取指定搜索参数的值。

// 创建 URLSearchParams 对象
const urlParams = new URLSearchParams('https://example.com?name=John&age=30');

// 读取搜索参数
const name = urlParams.get('name');
const age = urlParams.get('age');

console.log(name); // 输出: John
console.log(age); // 输出: 30

构建 URL 搜索参数

除了读取搜索参数，我们还可以使用 URLSearchParams 对象来构建 URL 查询字符串。可以使用 set 方法来设置搜索参数的值。

// 创建空的 URLSearchParams 对象
const urlParams = new URLSearchParams();

// 设置搜索参数的值
urlParams.set('name', 'John');
urlParams.set('age', '30');

// 获取构建后的 URL 查询字符串
const queryString = urlParams.toString();

console.log(queryString); // 输出: name=John&age=30

以上代码将搜索参数构建为 name=John&age=30 的格式。

注意：如果需要将 URLSearchParams 对象添加到现有的 URL 上，可以使用 URL 类的 searchParams 属性。

// 创建 URL 对象
const url = new URL('https://example.com');

// 获取 URLSearchParams 对象
const urlParams = url.searchParams;

// 设置搜索参数的值
urlParams.set('name', 'John');
urlParams.set('age', '30');

// 获取构建后的 URL 查询字符串
const queryString = url.searchParams.toString();

console.log(queryString); // 输出: name=John&age=30

以上代码将搜索参数添加到现有的 URL 上，并获取构建后的 URL 查询字符串。

这是 TypeScript 中使用 URLSearchParams 读取和构建 URL 搜索参数的示例代码。更多关于 URLSearchParams 类的详细信息，请参阅 TypeScript 官方文档。

希望这能帮助到你！有任何其他问题，请随时提问。