javascript查询字符串参数的方法

当我们使用JavaScript处理网页URL时，常常需要获取URL查询字符串中的参数值。下面给出了常用的JavaScript查询字符串参数的方法：

方法一：使用正则表达式

使用正则表达式可以直接从URL的查询字符串中获取参数值。

假设有一个URL为：https://www.example.com/?name=John&age=18

通过以下代码获取name参数的值，即John：

var reg = new RegExp("(^|&)name=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
var name = r != null ? decodeURIComponent(r[2]) : "";

解释一下这段代码。首先，定义一个正则表达式来匹配查询字符串中的参数名和参数值，^ 和 & 和 &| 就是为了匹配一个完整的参数，编组2（r[2]）就是那个值。然后，将整个查询字符串去掉开头的问号，然后运用JavaScript的match函数来正则匹配这个字符串，返回一个数组，然后我们可以从这个数组中获取编组2的值，进而得到参数值。

以上代码对于常用的简单参数传递可以 wells帮助，但是如果查询字符串中参数的数量和特殊性比较多的话，要写的正则表达式可能会非常复杂，我们还可以使用另一种方法：

方法二：使用JavaScript库

这种方法比较简单，只要导入相应的JavaScript库就行了，下面介绍两个常用的库：

1. queryString：它是一个轻量级库，可以用来解析URL的查询字符串和哈希段中的参数。

使用方法如下：

javascript
const queryString = require('query-string');
const params = queryString.parse(location.search);
const name = params.name; // 获取name参数的值

以上代码中通过 query-string 库的 parse 方法解析整个查询字符串，然后获取参数值。

1. URLSearchParams：它是ES6新增的内置对象，可以很方便地获取URL查询字符串中的所有参数。

使用方法如下：

javascript
const params = new URLSearchParams(window.location.search);
const name = params.get('name'); // 获取name参数的值

以上代码通过 new URLSearchParams() 构造函数和 get() 方法获取参数值。

示例：

假设有一个URL为：https://www.example.com/?name=John&age=18&city=%E4%B8%8A%E6%B5%B7

使用第一种方法获取city参数的值：

var reg = new RegExp("(^|&)city=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
var city = r != null ? decodeURIComponent(r[2]) : "";

而使用第二种方法，获取city参数的值相对短小简单：

const params = new URLSearchParams(window.location.search);
const city = params.get('city');

我们可以看到，如果查询字符串中参数的数量和特殊性较多的话，第二种方法明显会更方便简单。

综上所述，不管是使用正则表达式获取参数值，还是使用JavaScript库获取参数值，都有其自身的优劣势，开发者可以根据自己的需求来选择合适的方法。