JavaScript 获取 URL 参数

在Web开发中，我们经常需要从URL中获取参数。在JavaScript中，我们可以使用多种方法来获取URL参数。

1. 使用URLSearchParams API

如果您正在使用现代浏览器，可以使用URLSearchParams API来获取URL参数。

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

这个代码段使用了URLSearchParams构造函数和get方法来获取myParam参数的值。

2. 使用正则表达式

您还可以使用正则表达式从URL中获取参数。下面是一个使用正则表达式的示例。

function getQueryParam(param) {
  const regex = new RegExp(`[?&]${param}=([^&#]*)`);
  const url = window.location.href;
  const results = regex.exec(url);
  return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

const myParam = getQueryParam('myParam');
console.log(myParam);

这个代码段定义了一个函数，该函数接受参数名并返回URL参数的值。

3. 使用query-string库

query-string库是一个流行的JavaScript库，可以方便地解析和序列化URL查询字符串。您可以使用它来获取和处理URL参数。

安装query-string库：

npm install query-string

下面是一个使用query-string库的示例。

import queryString from 'query-string';

const values = queryString.parse(window.location.search);
console.log(values.myParam);

结论

您可以使用不同的方法来获取URL参数，包括使用URLSearchParams、正则表达式和query-string库。选择最适合您的需要的方法。

参考文献

• URLSearchParams API
• RegExp
• query-string库