从实际 URL 获取参数 JavaScript

在 Web 开发中，我们经常需要从 URL 中获取参数。这些参数可能是用户输入的数据、与其他页面交互的数据或者其他数据。在 JavaScript 中，我们可以通过多种方式获取 URL 参数。

方法一：使用 URLSearchParams 对象

从 ES6 开始，JavaScript 提供了 URLSearchParams 对象用于处理 URL 查询参数。通过 URLSearchParams 对象，我们可以方便地获取 URL 参数。

const params = new URLSearchParams(window.location.search);
const id = params.get('id');
console.log(id);

在上面的代码中，我们通过 URLSearchParams 构造函数传入了 window.location.search，即 URL 中的查询参数，生成了一个 params 对象。

我们可以使用 get 方法获取指定名称的参数值。例如，我们可以通过 params.get('id') 获取名为 id 的参数值。

方法二：使用正则表达式

另一种获取 URL 参数的方法是使用正则表达式。例如，我们可以使用 /[?&]id=([^&#]*)/ 来获取名为 id 的参数值。

const url = window.location.href;
const regex = /[?&]id=([^&#]*)/;
const match = regex.exec(url);
const id = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
console.log(id);

在上面的代码中，我们首先通过 window.location.href 获取当前 URL，然后使用正则表达式来匹配查询参数。

正则表达式 /[?&]id=([^&#]*)/ 中，[?&] 表示匹配 ? 或 &，id= 表示匹配名称为 id 的参数，([^&#]*) 表示匹配参数值，直到遇到 # 或者 URL 的末尾。

方法三：使用 URL 解析器

还有另一种方式是使用 URL 解析器。通过 URL 解析器，我们可以方便地获取 URL 的各个组成部分。

const url = new URL(window.location.href);
const id = url.searchParams.get('id');
console.log(id);

在上面的代码中，我们使用了 URL 构造函数来生成一个 URL 对象，并使用 searchParams.get('id') 来获取名为 id 的参数值。

结语

以上就是从实际 URL 获取参数的三种方法。使用哪种方法取决于个人习惯和具体场景，在实际开发中可以根据情况选择合适的方式。