JavaScript获取URL中参数querystring的方法详解

在前端开发中，我们经常需要从URL中获取参数querystring的值，然后根据这些参数进行相应的操作。本文将介绍一些获取URL中参数querystring的方法，希望能够对你有所帮助。

方法一：使用正则表达式

1. 使用window.location.search获取URL中的querystring字符串

var querystring = window.location.search.substring(1);

1. 使用正则表达式解析querystring字符串

function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = querystring.match(reg);
  if (r != null) return unescape(r[2]); return null;
}

1. 调用方法获取参数值

var id = getQueryString("id");
console.log(id); // 输出方法参数id对应的值

方法二：使用URLSearchParams对象

1. 使用URLSearchParams对象解析querystring字符串

var searchParams = new URLSearchParams(window.location.search);

1. 调用对象的get方法获取参数值

var id = searchParams.get("id");
console.log(id); // 输出对象参数id对应的值

方法三：使用query-string库

1. 安装query-string库

npm install query-string --save

1. 引入query-string库

var queryString = require('query-string');

1. 使用parse方法解析querystring字符串

var query = queryString.parse(window.location.search);
console.log(query); // 输出解析结果

1. 调用对应参数获取参数值

var id = query.id;
console.log(id); // 输出参数id对应的值

以上是获取URL中参数querystring的三种方法，可以根据实际情况选择使用。希望在实际开发中可以帮助到你。

示例1：
假如当前页面URL为：http://www.example.com/?name=john&age=18
我们可以使用以上方法获取参数name和age的值。

示例2：
假如当前页面URL为：http://www.example.com/?id=123
我们可以使用以上方法获取参数id的值。