获取JavaScript中的查询字符串的方法

1. 什么是查询字符串

在Web开发中，查询字符串是URL中问号（?）后的一串文本，它包含了一系列的参数和值，用于向服务器传递信息，常用于GET请求中。例如，在以下URL地址中，name=John&age=20就是一个查询字符串。

https://example.com/user?id=123&name=John&age=20

2. 单个参数获取方法

2.1 location.search

JavaScript中获取查询字符串的最简单方法是通过location.search属性。它返回从问号（?）开始的URL查询部分，但不包括锚点部分（#）和搜索部分（search）。下面的代码通过解析查询字符串中的值并将其存储在变量中，来演示如何使用location.search属性获取参数的值。

//获取完整查询字符串

let queryStr = location.search;
//去掉问号，获取参数
let params = new URLSearchParams(queryStr);
let paramName = 'name';
let paramValue = params.get(paramName);
console.log(`${paramName}的值：${paramValue}`);

2.2 URLSearchParams

URLSearchParams是一种被浏览器支持的JavaScript API，它可以在URL字符串中解析查询字符串，并提供了获取和设置参数值的方法。下面的代码演示了如何使用URLSearchParams获取参数值。

//获取完整查询字符串

const searchParams = new URLSearchParams(window.location.search);
//获取参数
const temperature = searchParams.get('temperature');
console.log(`temperature的值：${temperature}`);

3. 多个参数获取方法

3.1 URLSearchParams.entries()

URLSearchParams.entries()方法返回一个迭代器，该迭代器将查询字符串中的每个键名和对应的值作为一个数组作为属性，可以通过遍历该迭代器获取所有的参数名和参数值。下面的代码演示了如何使用URLSearchParams.entries()方法获取所有参数名和参数值

//获取完整查询字符串

const searchParams = new URLSearchParams(window.location.search);
//获取所有参数名和参数值
const params = {};
for (const [key, value] of searchParams.entries()) {
  params[key] = value;
}
console.log(params);

3.2 URLSearchParams.keys()和values()

URLSearchParams.keys()方法返回一个迭代器，该迭代器将查询字符串中的每个键名作为一个字符串返回，URLSearchParams.values()方法返回一个迭代器，该迭代器将查询字符串中的每个值作为一个字符串返回。下面的代码演示了如何使用URLSearchParams.keys()和values()方法获取所有参数名和参数值。

//获取完整查询字符串

const searchParams = new URLSearchParams(window.location.search);
//获取所有参数名
const keys = searchParams.keys();
//获取所有参数值
const values = searchParams.values();
console.log(Array.from(keys));
console.log(Array.from(values));

4. 总结

在Web开发中，jQuery是一个非常受欢迎的JavaScript库，它可以简化许多常见任务的编写，包括获取查询字符串的值。但是，在现代Web浏览器中，可以使用原生JavaScript API来执行这些任务。本文介绍了JavaScript中获取查询字符串的几种不同方法，包括使用location.search属性，使用URLSearchParams API，以及使用entries()、keys()和values()方法来遍历查询字符串中的参数。