如何在 JavaScript 中从 URL 获取变量

在 Web 开发中，我们通常需要从 URL 中获取某个参数的值，然后根据这个值来做一些操作。下面介绍一些在 JavaScript 中获取 URL 参数的方法。

使用 window.location.search

我们可以使用 window.location.search 属性来获取 URL 中的查询字符串部分，例如：

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
console.log(myParam);

这个方法首先创建了一个 URLSearchParams 对象，然后调用其 get 方法获取指定参数名的值。需要注意的是，如果 URL 中没有指定参数名，则 get 方法会返回 null。

使用正则表达式

我们可以使用正则表达式来从 URL 中提取参数的值，例如：

const url = 'https://www.example.com/?myParam=123';
const regex = /[?&]myParam=(\d+)/;
const match = regex.exec(url);
const myParam = match && match[1];
console.log(myParam);

这个方法首先定义了一个正则表达式，用于匹配 URL 中指定参数的值。然后调用 exec 方法执行正则表达式，如果成功匹配则返回一个数组，其中第一个元素是匹配的字符串，后面的元素是正则表达式中的捕获组的值。在这个例子中，我们只有一个捕获组，所以 match[1] 就是我们要获取的参数值。需要注意的是，如果 URL 中没有指定参数名，则 exec 方法会返回 null。

使用 URLSearchParams API

在现代浏览器中，我们可以直接使用 URLSearchParams API 来获取 URL 参数的值，例如：

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
console.log(myParam);

这个方法和之前介绍的第一种方法类似，但是不需要手动解析 URL 查询字符串，而是直接调用 URLSearchParams 的 get 方法获取指定参数名的值。需要注意的是，该 API 并不支持所有浏览器，但可以使用 polyfill 自行解决兼容性问题。

结语

以上介绍了三种从 URL 中获取参数值的方法，具体使用哪种方法取决于个人喜好和项目需求。无论使用哪种方法，都需要注意输入的 URL 是否合法，以避免程序出错。