js获取url参数值的两种方式

下面是使用 JavaScript 获取 URL 参数的两种方式的详细攻略。

下面是使用 JavaScript 获取 URL 参数的两种方式的详细攻略。

方式一：使用正则表达式

使用正则表达式是一种比较常用的方式，它可以从 URL 中提取出我们需要的参数。这种方法核心就是通过正则表达式匹配 URL 字符串中的参数值。

function getQueryString(key) {
  const reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
  const params = window.location.search.substr(1).match(reg);
  if (params != null) {
    return unescape(params[2]);
  }
  return null;
}

console.log(getQueryString('name')); //输出 name 参数的值

以上代码使用了正则表达式，其中 getQueryString 函数接受一个参数 key，表示需要获取的参数的键。在函数内部，首先创建一个正则表达式来匹配符合条件的参数。然后使用 window.location.search 获取 URL 中的参数部分，使用正则表达式匹配指定的参数，如果匹配成功则返回参数的值，失败则返回 null。

示例：

假设当前的页面 URL 是 http://example.com/index.html?name=Lucy&age=18，那么调用 console.log(getQueryString('name')) 将会输出“Lucy”。

方式二：使用 URLSearchParams 对象

URLSearchParams 对象是 URL 的一部分，它可以帮助我们获取 URL 中的参数。这个方法需要浏览器支持 URLSearchParams 对象。以下是示例代码。

function getQueryString(key){
  const urlParams = new URLSearchParams(window.location.search);
  const value = urlParams.get(key);
  return value;
}

console.log(getQueryString('name')); //输出 name 参数的值

以上代码使用了 URLSearchParams 对象，以及它的 get 方法来获取指定的参数值。如果没有该参数，则返回 null。

示例：

假设当前的页面 URL 是 http://example.com/index.html?name=Lucy&age=18，那么调用 console.log(getQueryString('name')) 将输出“Lucy”。

以上是两种获取 URL 参数值的方式，其中第二种方法可以更加简便。