当我们通过 URL 发送 GET 请求时，有时需要从 URL 中获取查询参数，以便对请求进行相应的操作。在本文中，我们将介绍如何在 JavaScript 中获取这些查询参数。
什么是查询参数？
查询参数是作为 URL 的一部分发送的数据，通常用于告知服务器需要执行哪些操作或者需要返回的结果类型。查询参数的格式如下：
http://example.com/path/to/resource?key1=value1&key2=value2
在上面的示例中，"?" 符号之后的部分是查询参数。每个查询参数由一个键和一个值组成，以 "=" 符号连接。多个查询参数可以使用 "&" 符号连接。
获取查询参数
在 JavaScript 中，我们可以使用以下方法来获取查询参数：
方法一：使用 window.location.search 属性
window.location.search 属性包含 URL 中问号（?）后的查询字符串。我们可以使用正则表达式或其他方法来解析查询字符串并获取值。
const searchParams = new URLSearchParams(window.location.search);
const foo = searchParams.get('foo');
console.log(foo); // 输出 "bar"方法二：使用 URL 对象
URL 对象提供了一种更简单的方法来获取查询参数。我们可以使用 URL.searchParams 属性访问查询参数，并使用 get() 方法获取特定的参数值。
const url = new URL('http://example.com/path/to/resource?key1=value1&key2=value2');
const searchParams = url.searchParams;
const foo = searchParams.get('foo');
console.log(foo); // 输出 "bar"方法三：使用正则表达式
如果您不喜欢使用 URL 对象或 URLSearchParams，也可以使用正则表达式来解析查询字符串。
const queryString = window.location.search;
const regex = /[?&]([^=#]+)=([^&#]*)/g;
let match;
while ((match = regex.exec(queryString))) {
console.log(match[1], match[2]);
}上述方法将循环遍历每个查询参数，并输出它们的键和值。
小结
在 JavaScript 中获取查询参数有多种方法可供选择。我们可以使用 window.location.search 属性、URL 对象或正则表达式来解析查询字符串并获取数据。选择哪种方法取决于您的需求和偏好。
无论您选择哪种方法，都应该始终谨慎处理查询参数，以防止安全漏洞。例如，对用户输入进行验证和过滤，以确保只接受有效和安全的值。
示例代码
-- -------------------- ---- ------- -- -- ---------------------- -- ----- ------------ - --- ---------------------------------------- ----- --- - ------------------------ ----------------- -- -- --- -- ----- --- - --- ------------------------------------------------------------------- ----- ------------ - ----------------- ----- --- - ------------------------ ----------------- -- ------- ----- ----------- - ----------------------- ----- ----- - ------------------------- --- ------ ----- ------- - ------------------------- - --------------------- ---------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12575