返回

抽丝剥茧，从 URI 中解析查询字符串参数

前端

众所周知，Web 开发中，URI（统一资源标识符）扮演着至关重要的角色。它充当网络上资源的地址，指引浏览器或其他应用程序找到并获取这些资源。

URI 由多个部分组成，其中一个关键部分是查询字符串，它通常附加在 URI 的末尾，以问号 (?) 开头，后面跟着一组以&符号分隔的键值对。这些键值对包含附加信息，用于向服务器发送请求时传递特定参数。

在 JavaScript 中，我们可以使用以下步骤从 URI 字符串中提取查询字符串参数：

  1. 分割 URI 字符串： 将 URI 字符串分割成两部分：查询字符串前面的部分和查询字符串本身。
  2. 删除问号： 从查询字符串中删除问号 (?)。
  3. 分割查询字符串： 将查询字符串按 & 符号分割成一个键值对数组。
  4. 解析键值对： 对于每个键值对，使用等号 (=) 将键和值分开。
  5. 存储结果： 将提取的查询字符串参数存储在一个对象或映射中。

下面是一个实现上述步骤的 JavaScript 函数示例：

function getQueryParams(uri) {
  // 分割 URI 字符串
  const parts = uri.split("?");

  // 如果没有查询字符串，则返回一个空对象
  if (parts.length === 1) {
    return {};
  }

  // 删除问号
  const query = parts[1];

  // 分割查询字符串
  const params = query.split("&");

  // 解析键值对
  const queryParams = {};
  for (let param of params) {
    const [key, value] = param.split("=");
    queryParams[key] = value;
  }

  // 返回查询字符串参数对象
  return queryParams;
}

使用此函数，我们可以轻松地从任何 URI 字符串中提取查询字符串参数。例如：

const uri = "https://example.com/page?name=John&age=30";
const queryParams = getQueryParams(uri);

console.log(queryParams); // { name: 'John', age: '30' }

通过理解如何从 URI 中解析查询字符串参数，我们可以更轻松地处理和利用这些参数，从而增强 Web 应用程序的功能性。