从当前页面 URL 中获取查询字符串参数并将其转换为一个对象

随着 Web 应用程序变得越来越复杂，我们经常需要从 URL 中获取信息以根据请求定制响应。在 JavaScript 中，我们可以使用 URL 对象从 URL 中提取查询字符串参数并将其转换为对象。

查询字符串参数

查询字符串参数是附加到 URL 末尾并以问号 (?) 开头的键值对。例如，以下 URL 包含查询字符串参数 name=John：

https://example.com/?name=John

使用 URL 对象获取参数

要从 URL 中获取查询字符串参数，我们可以使用 URL 对象。URL 对象是一个内置的 JavaScript 对象，它允许我们操作 URL 的不同部分，包括协议、主机名、路径名和查询字符串。

以下是获取查询字符串参数的方法：

1. 创建 URL 对象： 使用 new URL() 构造函数创建一个 URL 对象，并将其初始化为当前页面的 URL。

const url = new URL(window.location.href);

2. 获取查询字符串： 使用 search 属性获取查询字符串。它将返回一个包含查询字符串中所有键值对的字符串。

const queryString = url.search;

3. 将查询字符串转换为对象： 使用 URLSearchParams 对象将查询字符串转换为一个对象。URLSearchParams 对象是一个内置的 JavaScript 对象，它允许我们操作查询字符串中的参数。

const params = new URLSearchParams(queryString);

4. 获取参数值： 我们可以使用 get() 方法获取查询字符串参数的值。

const name = params.get('name'); // "John"

示例

以下示例演示如何使用 URL 对象从当前页面的 URL 中获取查询字符串参数并将其转换为对象：

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

console.log(params.get('name')); // "John"

结论

使用 URL 对象从 URL 中提取查询字符串参数并将其转换为对象非常简单。这使我们能够根据请求定制响应，从而创建更动态和交互式的 Web 应用程序。