在前端开发中，我们经常需要从 URL 中获取查询字符串参数。比如，在一个网站中，用户通过搜索框输入关键词后，这些关键词会以查询字符串的形式追加到 URL 后面，供后续的搜索结果页面使用。那么，有没有一种简单的方法可以获取 URL 中的查询字符串呢？
答案是肯定的。现代浏览器提供了多种 API 来让我们方便地获取 URL 中的查询字符串参数。下面我们就来详细介绍这些方法。
方法一：使用 location.search
location.search 是一个包含问号（?）后面的查询字符串的字符串。例如，如果当前 URL 是 https://www.example.com/search?q=javascript&page=1，那么 location.search 就是 ?q=javascript&page=1。我们可以通过解析这个字符串来获取每个查询参数的值。
示例代码：
const searchParams = new URLSearchParams(location.search);
console.log(searchParams.get('q')); // 输出 "javascript"
console.log(searchParams.get('page')); // 输出 "1"方法二：使用 URL 对象
URL 对象是一个包含当前 URL 的各个组成部分的对象。我们可以通过 URL.searchParams 属性来获取一个表示查询字符串参数的 URLSearchParams 对象，并使用其提供的 API 来获取每个查询参数的值。
示例代码：
const url = new URL('https://www.example.com/search?q=javascript&page=1');
console.log(url.searchParams.get('q')); // 输出 "javascript"
console.log(url.searchParams.get('page')); // 输出 "1"方法三：使用正则表达式
如果你比较熟练地掌握了正则表达式，那么也可以使用正则表达式来从 URL 中提取查询字符串参数。
示例代码：
-- -------------------- ---- -------
----- --- - -----------------------------------------------------
----- ----- - ------------------------------------
----- ------ - ---
-- ------- -
----------------- -- -
----- ---- - --------------------------
----------------------------------- - ----------------------------
---
-
---------------------- -- -- ------------
------------------------- -- -- ---总结
以上就是获取查询字符串的 URL 的方法。通过使用这些 API，我们可以轻松地获取 URL 中的查询字符串参数，并在开发中方便地处理这些参数。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9378
