JavaScript获得url查询参数的方法

当我们需要获取当前页面URL中的查询参数时，可以使用JavaScript代码来完成这一任务。获取URL查询参数的方法主要分为两种，分别是使用正则表达式和URLSearchParams对象。

当我们需要获取当前页面URL中的查询参数时，可以使用JavaScript代码来完成这一任务。获取URL查询参数的方法主要分为两种，分别是使用正则表达式和URLSearchParams对象。

使用正则表达式获取URL查询参数

使用正则表达式来获取URL查询参数，可以通过对当前URL使用方法location.search来获得查询参数，然后使用正则表达式来解析得到想要的参数值。

代码示例如下：

// 获取URL查询参数的方法，使用正则表达式实现
function getQueryParam(name) {
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
  const result = window.location.search.substr(1).match(reg);
  if (result !== null) {
    return decodeURIComponent(result[2]);
  }
  return null;
}

// 获取URL中的参数名为id的值
const id = getQueryParam('id');
console.log(id);

通过调用getQueryParam方法，可以获取URL中参数名为id的值。

使用URLSearchParams对象获取URL查询参数

使用URLSearchParams对象获取URL查询参数，是一种较为便捷的方式。该方法创建一个URLSearchParams对象，然后可以使用get()方法直接获取所需参数的值。

代码示例如下：

// 获取URL查询参数的方法，使用URLSearchParams对象实现
function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  const result = urlParams.get(name);
  return result;
}

// 获取URL中的参数名为id的值
const id = getQueryParam('id');
console.log(id);

通过调用getQueryParam方法，同样可以获取URL中参数名为id的值。

以上两种方法都可以实现获取URL的查询参数，具体使用哪种方式，要根据项目的实际情况来进行选择。