原生JS获取URL链接参数的几种常见方法

我来给你详细讲解一下怎么通过原生JS获取URL链接参数。

一、利用window.location.search

window.location.search可以获取URL的查询参数部分，即URL中?号后面的内容。

示例代码如下：

const queryString = window.location.search;
console.log(queryString); // ?param1=value1&param2=value2

上面的代码输出的内容为?param1=value1&param2=value2，可以通过字符串的操作来进一步解析出具体的参数值。

二、利用URLSearchParams

URLSearchParams是一个内置对象，用于处理URL查询参数。可以将查询参数部分转换成一个对象，便于操作参数值。

示例代码如下：

const params = new URLSearchParams(window.location.search);
console.log(params.get('param1')); // value1
console.log(params.get('param2')); // value2

上面的代码通过URLSearchParams对象解析了URL中的查询参数部分，并通过get方法来获取具体的参数值。

三、利用正则表达式

如果不想使用内置对象来获取URL参数值，还可以通过正则表达式来提取URL中的指定参数值。

示例代码如下：

function getParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  const result = window.location.search.substr(1).match(reg);
  if (result != null) {
    return decodeURIComponent(result[2]);
  }
  return null;
}

console.log(getParam('param1')); // value1
console.log(getParam('param2')); // value2

上面的代码通过正则表达式匹配URL中的指定参数值，并返回参数值。需要注意的是，由于URL中的参数值可能会经过编码，所以需要对获取的结果进行解码。

总体来说，以上三种方法都可以实现获取URL中的参数值，具体使用哪种方法可以根据实际场景来选择。