在前端开发中，我们经常需要从 URL 中获取查询字符串。查询字符串是指 URL 中的问号后面的部分，通常用于传递参数和数据。本文将介绍如何使用 JavaScript 获取查询字符串的方法，并提供一些示例代码。
解析查询字符串
要获取查询字符串，首先需要将 URL 中的查询字符串解析为一组键值对。这可以通过使用 window.location.search 属性来完成。该属性返回当前 URL 中的查询字符串，不包括问号（?）。
const queryString = window.location.search; console.log(queryString); // 输出 ?name=张三&age=18
接下来，我们可以使用 JavaScript 中的 URLSearchParams 对象来解析查询字符串。该对象允许您访问查询字符串中的每个参数，并以编程方式进行操作。
const urlParams = new URLSearchParams(queryString);
console.log(urlParams.get('name')); // 输出 "张三"
console.log(urlParams.get('age')); // 输出 "18"上面的代码使用 URLSearchParams 对象获取查询字符串中的参数值。请注意，如果查询字符串中不存在此键，则 get() 方法将返回 null。如果您需要检查查询字符串中是否存在特定的键，请使用 has() 方法。
使用正则表达式
除了使用 URLSearchParams 对象之外，还可以使用正则表达式来解析查询字符串。正则表达式是一种强大的模式匹配工具，可以根据模式从字符串中提取信息。
-- -------------------- ---- ------- ----- ----------- - ----------------------- ----- ----- - -------------------- --- -- ----- ------ - --- ----- --- - ------------------------- - -------------------------------- - ------------------------- - -------------------- -- -- ------ ----- ---- -----
上面的代码使用正则表达式将查询字符串解析为一个对象。请注意，我们使用 decodeURIComponent() 函数对参数名称和值进行解码，以确保它们在任何情况下都是有效的。
总结
本文介绍了两种不同的方法来获取查询字符串，并提供了一些示例代码。使用 URLSearchParams 对象可以更轻松地解析查询字符串，但如果您需要更高自定义性或更复杂的逻辑，请使用正则表达式。
无论您使用哪种方法，确保您对查询字符串进行正确的编码和解码，以确保安全性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29371