JS怎么将地址栏查询字符串转换为JSON对象

一、现代原生标准方案：URLSearchParams 与 Object.fromEntries

在 ECMAScript 2019（ES10）及之后的标准环境下，浏览器为处理 URL 查询参数提供了极佳的原生支持。URLSearchParams 接口定义了一系列用于处理 URL 查询字符串的实用方法，而 Object.fromEntries() 则允许将类似 [key, value] 的可迭代键值对列表直接转换为普通的 JavaScript 对象。

假设当前网页地址栏为：

https://www.example.com/search?keyword=javascript&page=1&filter=article

可以通过以下两行代码将其转换为对象结构：

// 1. 获取地址栏查询字符串（包含开头的 '?'）
const searchString = window.location.search;

// 2. 借助 URLSearchParams 与 Object.fromEntries 完成转换
const params = new URLSearchParams(searchString);
const queryJSON = Object.fromEntries(params.entries());

console.log(queryJSON);
// 输出结果：
// { keyword: "javascript", page: "1", filter: "article" }

如果业务需要的是合法的 JSON 字符串格式（例如作为网络请求的 Payload 发送给服务端），直接在此基础上调用 JSON.stringify(queryJSON) 即可完成序列化。

从底层流转机制来看，URLSearchParams 会自动剥离首部的问号 ?，并自动按照标准对 %20 以及 + 号解码为空格字符。params.entries() 返回一个遍历器，每个元素为 [key, value] 数组。Object.fromEntries 消费此迭代器并把键值分配至新对象上。

二、四步流水线：从原始字符串到完整解析器

原生极简方式虽然优雅，但有一个致命短板：当 URL 包含同名重复参数时（例如 tag=web&tag=js），Object.fromEntries() 会用后面的值无条件覆盖前面的值，导致前序数据丢失。此外，所有属性值默认解析为字符串类型，数字 1 和布尔值 true 仍保持字符串格式。要实现工业级的解析器，需要遵循一套完整的四步处理流水线。

步骤 1：精确提取有效查询串

在传统多页应用中，参数由 window.location.search 承载；但在使用 Hash 路由的单页应用（如 Vue Router 或 React Router 的 Hash 模式）中，URL 形式通常为 https://domain.com/#/list?category=book&id=10。此时 location.search 返回的是空字符串，参数被藏在 location.hash 之后。解析前必须先通过索引查找统一截取真实 Query 片段。

步骤 2：切分与键值解码

使用 & 字符把整段查询串切割为独立的参数片段。对每一段用首个出现的 = 区分键名与键值。使用 decodeURIComponent 解码内容，同时需按照 application/x-www-form-urlencoded 规范，先将 + 替换为空格，避免特殊符号失真。

步骤 3：同名键判重与数组化

在向结果对象填入数据时，先通过 Object.prototype.hasOwnProperty.call(target, key) 检查属性是否已存在。如果键名首次出现，按常规标量存储；如果键名已存在且当前不是数组，则构建数组 [原值, 新值]；若已经是数组，则直接执行 push(新值)。

步骤 4：智能类型转换与深层规整

根据业务场景，对于纯数字形式的字符串（如 "123"）、布尔字面量（"true" / "false"）以及空字符串，可以进行安全映射转换，使其还原为对应的 JavaScript 原生数据类型，提升后续数据消费效率。

三、复杂路由与输入场景的分支判断

在真实业务工程中，输入源可能并不局限于当前窗口的 location，还可能是来自组件 Props 的某段指定 URL、AJAX 回包内的跳转链接或纯文本参数。系统必须能够智能识别输入模式并进入对应的处理分支。

以下为针对不同分支场景的输入适配对照：

四、生产级健壮解析函数的完整实现

结合上述四步流水线与各分支防护逻辑，我们可以封装一个高健壮性、零外部依赖的工具函数 queryStringToJSON：

/**
 * 将任意 URL 或查询字符串转换为纯净的 JSON 对象
 * @param {string} [rawInput] - 待解析的 URL 或 search 字符串，留空则自动读取当前页面地址
 * @param {Object} [options] - 配置选项
 * @param {boolean} [options.parseType=false] - 是否将数字与布尔值自动还原为真实类型
 * @returns {Object} 转换后的 JSON 对象
 */
function queryStringToJSON(rawInput, options = {}) {
  const { parseType = false } = options;
  const result = Object.create(null); // 使用空原型对象，防止 __proto__ 原型污染

  // 1. 获取并规范化输入字符串
  let queryStr = '';
  if (typeof rawInput === 'string' && rawInput.trim()) {
    const qIndex = rawInput.indexOf('?');
    queryStr = qIndex !== -1 ? rawInput.slice(qIndex + 1) : rawInput;
  } else if (typeof window !== 'undefined' && window.location) {
    // 自动兼容 Hash 路由与标准 search
    if (window.location.search) {
      queryStr = window.location.search.slice(1);
    } else if (window.location.hash && window.location.hash.includes('?')) {
      queryStr = window.location.hash.split('?')[1];
    }
  }

  // 剔除末尾可能存在的 hash 锚点
  const hashIndex = queryStr.indexOf('#');
  if (hashIndex !== -1) {
    queryStr = queryStr.slice(0, hashIndex);
  }

  if (!queryStr.trim()) {
    return result;
  }

  // 2. 辅助类型推断函数
  const transformValue = (val) => {
    if (!parseType) return val;
    if (val === 'true') return true;
    if (val === 'false') return false;
    if (val === 'null') return null;
    if (val === 'undefined') return undefined;
    if (!isNaN(val) && val.trim() !== '') {
      return Number(val);
    }
    return val;
  };

  // 3. 逐对解析
  const pairs = queryStr.split('&');
  for (let i = 0; i < pairs.length; i++) {
    const pair = pairs[i];
    if (!pair) continue;

    const eqIndex = pair.indexOf('=');
    let key, rawVal;

    if (eqIndex === -1) {
      key = pair;
      rawVal = '';
    } else {
      key = pair.slice(0, eqIndex);
      rawVal = pair.slice(eqIndex + 1);
    }

    // 安全解码，替换 '+' 为真实空格
    try {
      key = decodeURIComponent(key.replace(/\+/g, ' '));
      rawVal = decodeURIComponent(rawVal.replace(/\+/g, ' '));
    } catch (e) {
      // 防止 URIError（如畸形 % 字符）使页面崩溃
      key = unescape(key);
      rawVal = unescape(rawVal);
    }

    // 剔除如 "ids[]" 末尾的方括号
    if (key.endsWith('[]')) {
      key = key.slice(0, -2);
    }

    // 防御恶意原型污染 key
    if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
      continue;
    }

    const parsedVal = transformValue(rawVal);

    // 4. 合并多值逻辑
    if (Object.prototype.hasOwnProperty.call(result, key)) {
      if (Array.isArray(result[key])) {
        result[key].push(parsedVal);
      } else {
        result[key] = [result[key], parsedVal];
      }
    } else {
      result[key] = parsedVal;
    }
  }

  return result;
}

测试用例与运行验证

运行以下多形态测试用例，可以清晰验证该函数的健壮性：

// 案例 1：基础参数与类型自动推断
const url1 = "https://example.com/api?id=1024&active=true&title=JS%20Guide";
console.log(queryStringToJSON(url1, { parseType: true }));
// 输出：{ id: 1024, active: true, title: "JS Guide" }

// 案例 2：同名多选参数与数组符号（ids[]=1&ids[]=2 或 tag=a&tag=b）
const url2 = "?tag=javascript&tag=css&role[]=admin&role[]=editor";
console.log(queryStringToJSON(url2));
// 输出：{ tag: ["javascript", "css"], role: ["admin", "editor"] }

// 案例 3：SPA Hash 路由地址
const url3 = "http://localhost:8080/#/dashboard?theme=dark&fullscreen=false";
console.log(queryStringToJSON(url3, { parseType: true }));
// 输出：{ theme: "dark", fullscreen: false }

五、开发中常见的四大陷阱与避坑建议

在实际编码中，处理查询字符串看似简单，却极易在边缘场景产生难以排查的 Bug。以下四点需要特别留心：

六、方案选型总结

对于现代前端工程，地址栏查询字符串转换可以总结为两大使用策略：

• 极简场景（优先推荐）：若应用采用标准 History 路由，参数没有重复键，且可以直接消费字符串类型，直接使用 Object.fromEntries(new URLSearchParams(window.location.search))，代码优雅、执行高效、标准原生支持。
• 复杂工程场景（稳健推荐）：若处于 Hash 路由单页应用，或存在表格批量过滤、多选标签、复选框列表等同名参数，请使用本文封装的 queryStringToJSON 函数，全面保障数组收集、类型转换以及异常防崩溃能力。