在下一个 js 中从查询参数中获取值 - JavaScript

在Web开发中，从url查询参数中获取值是一项常见的操作。JavaScript提供了一个简单的方法来实现这个功能。在本文中，我们将讨论如何使用JavaScript从查询参数中获取值。

获取查询参数

要获取查询参数，我们需要使用window.location.search查找当前页面URL的查询字符串。查询字符串位于问号（?）之后，并将键和值对表示为“key=value”对，多个键/值对之间用“&”分隔。我们可以使用String.prototype.split()方法将其拆分为数组形式，然后使用循环迭代每个查询参数，并将其作为“key=value”字符串拆分为键和值。

以下是一个实现此功能的简单函数：

function getQueryParam(param) {
  const query = window.location.search.substring(1);
  const vars = query.split('&');
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=');
    if (decodeURIComponent(pair[0]) === param) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}

此函数接受一个参数（要获取的查询参数名称），并返回与该参数名称匹配的值。如果未找到该参数，则返回null。函数使用decodeURIComponent()方法解码 URI 组件，以便正确处理特殊字符。

以下是使用该函数获取查询参数的示例：

// URL：https://example.com/?page=2&search=JavaScript
const page = getQueryParam('page'); // 返回 '2'
const search = getQueryParam('search'); // 返回 'JavaScript'
const category = getQueryParam('category'); // 返回 null

使用此方法，我们可以轻松地从URL中获取查询参数并处理它们。

结论

在本文中，我们学习了如何使用JavaScript从URL查询参数中获取值。查询参数是Web开发中常见的一部分，掌握这个知识点对于构建复杂的Web应用程序至关重要。使用上述方法，我们可以轻松地获取查询参数并将其应用于我们的JavaScript代码。