在 URL 中表达参数 - JavaScript

在开发 Web 应用程序时，我们经常需要将某些参数传递到 URL 中。这些参数可以用于过滤数据、定位资源等。在 JavaScript 中，我们可以使用 URLSearchParams API 来处理 URL 参数。

URLSearchParams API

URLSearchParams API 提供了一组方法来处理 URL 查询参数。它可以用于在查询字符串中添加、删除和更新参数，还可以将查询字符串转换为对象或从对象构建查询字符串。

创建 URLSearchParams 实例

我们可以通过原生的 URLSearchParams 构造函数或 URL 类的实例的 searchParams 属性来创建一个 URLSearchParams 对象。

// 创建 URLSearchParams 对象
const params = new URLSearchParams('?name=John&age=30');

// 从 URL 对象中获取查询参数对象
const url = new URL('https://example.com/?name=John&age=30');
const params = url.searchParams;

获取和设置参数

我们可以使用 get、set、has 和 delete 方法来获取、设置、检查和删除单个参数。

const params = new URLSearchParams('?name=John&age=30');

// 获取参数值
console.log(params.get('name')); // 'John'

// 设置参数值
params.set('name', 'Mike');

// 检查参数是否存在
console.log(params.has('age')); // true

// 删除参数
params.delete('age');

迭代参数

我们可以使用 entries、keys 和 values 方法来迭代查询参数对象中的所有键值对、键和值。

const params = new URLSearchParams('?name=John&age=30');

console.log([...params.entries()]); // [['name', 'John'], ['age', '30']]
console.log([...params.keys()]); // ['name', 'age']
console.log([...params.values()]); // ['John', '30']

将查询参数转换为对象和从对象构建查询参数

我们可以使用 URLSearchParams 的构造函数和 toString 方法来将查询参数对象转换为字符串和从字符串构建查询参数对象。

// 从对象构建查询参数
const obj = { name: 'John', age: 30 };
const params = new URLSearchParams(obj);

// 将查询参数转换为字符串
console.log(params.toString()); // 'name=John&age=30'

在 URL 中表达参数

我们可以使用 query 参数将参数传递到 URL 中。查询参数是 URL 的一部分，通常以问号（?）开头，其后跟键值对，多个键值对之间用 & 符号分隔。

例如：

https://example.com/path?name=John&age=30

我们可以使用 URLSearchParams API 来解析和生成查询参数。

总结

URLSearchParams API 提供了一组方便的方法来处理 URL 查询参数。我们可以使用它来获取、设置、删除和迭代单个参数，还可以将查询参数转换为对象或从对象创建查询参数。在 URL 中表达参数时，我们可以使用 query 参数，它是 URL 的一部分，通常以问号（?）开头，多个键值对之间用 & 符号分隔。