如何使用 JavaScript 从当前 URL 获取查询字符串？

在前端开发中，获取 URL 中的查询字符串是一项常见的任务。查询字符串可以包含各种信息，例如用户输入内容、过滤条件等等。在本文中，我们将介绍如何使用 JavaScript 从当前 URL 中获取查询字符串。

什么是查询字符串？

查询字符串是 URL 中问号后面的部分，它通常包含一个或多个键值对，每个键值对之间用 & 符号分隔。例如：

https://example.com/search?q=JavaScript&sort=desc&page=2

在上面的 URL 中，查询字符串是 q=JavaScript&sort=desc&page=2。

获取查询字符串

要从当前 URL 中获取查询字符串，可以使用 window.location.search 属性。这个属性返回的是 URL 中问号后面的部分，包括问号本身。例如：

const queryString = window.location.search; // "?q=JavaScript&sort=desc&page=2"

如果只想获取查询参数而不包括问号，可以使用 substring() 方法去掉第一个字符。例如：

const queryString = window.location.search.substring(1); // "q=JavaScript&sort=desc&page=2"

解析查询字符串

一旦得到查询字符串，我们就需要将其解析成键值对的形式。可以使用 URLSearchParams 对象来实现这个功能。例如：

const queryString = window.location.search.substring(1);
const params = new URLSearchParams(queryString);

console.log(params.get('q')); // "JavaScript"
console.log(params.get('sort')); // "desc"
console.log(params.get('page')); // "2"

在上面的示例中，我们先将查询字符串传递给 URLSearchParams 构造函数创建一个 params 对象，然后可以使用 get() 方法获取每个参数的值。

总结

通过本文的介绍，我们了解了如何使用 JavaScript 从当前 URL 中获取查询字符串。我们可以使用 window.location.search 属性获取整个查询字符串，然后使用 substring() 方法去掉问号。接着，可以使用 URLSearchParams 对象将查询字符串解析成键值对的形式，方便我们进一步处理这些参数。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24106