js字符串"a=1&b=2"怎么转数组或对象

作者：异步漫步

时间：2026-11-13

详细讲解在 JavaScript 中如何将形如 a=1&b=2 的查询字符串转换为数组或对象，对比 URLSearchParams 与 split/reduce 两种主流方案的实现、边界差异与实际选型。

文章目录

方案一：现代标准 URLSearchParams（推荐）

自 ECMAScript 与 WHATWG 标准确立以来，现代浏览器和 Node.js（v10+）均原生内置了 URLSearchParams 构造函数。它专门用于操作和解析 URL 键值对，具备天然的字符解码、遍历器协议和高容错能力。

1. 转换为纯普通对象（Object）

结合 ES2019 推出的 Object.fromEntries()，可以直接将 URLSearchParams 生成的可迭代条目还原为一个标准 JavaScript 键值对象，仅需一行代码：

const str = "a=1&b=2";
const paramsObj = Object.fromEntries(new URLSearchParams(str));

console.log(paramsObj);
// 示例输出: { a: "1", b: "2" }
console.log(paramsObj.a); // 示例输出: "1"

执行过程非常直观：new URLSearchParams("a=1&b=2") 生成一个参数实例，该实例原生部署了 [Symbol.iterator]，每一步迭代都会产生一个 [key, value] 数组。Object.fromEntries() 消费这些键值对并组装成普通对象。

2. 转换为键值二维数组（Array）

若业务场景需要保持参数的物理顺序，或者要交给支持键值元组的函数处理，可以直接利用 ES6 扩展运算符 ... 或 Array.from() 将其铺平为二维数组：

const str = "a=1&b=2";

// 形式 A：解构为二维元组数组 [['a', '1'], ['b', '2']]
const tupleArr = [...new URLSearchParams(str)];
console.log(tupleArr);
// 示例输出: [["a", "1"], ["b", "2"]]

// 形式 B：映射为对象数组 [{ key: 'a', value: '1' }, ...]
const objArr = tupleArr.map(([key, value]) => ({ key, value }));
console.log(objArr);
// 示例输出: [{ key: "a", value: "1" }, { key: "b", value: "2" }]

js字符串"a=1&b=2"怎么转数组或对象 — 图 2：URLSearchParams 构造实例至数组/对象的分步执行流转

方案二：经典原生 split() 字符串分步切割（无依赖/手写版）

在某些无浏览器宿主环境、极老旧运行时，或者需要高度自定义参数合并逻辑时，使用 JavaScript 字符串的原生 split() 方法是另一条经典技术路径。

其核心逻辑分为两个明确阶段：首先按连接符 "&" 切出每个单独的键值表达式单元，再按等号 "=" 将每个单元拆解为键与值。

1. 手工转为二维数组

使用 split('&') 结合数组的 map() 方法，即可将字符串映射为二维结构：

const str = "a=1&b=2";

const arrayResult = str.split('&').map(pair => {
  const [key, ...values] = pair.split('=');
  // 考虑到值内部可能也包含等号（例如 token=abc==），采用 join 重组剩余部分
  return [decodeURIComponent(key), decodeURIComponent(values.join('='))];
});

console.log(arrayResult);
// 示例输出: [["a", "1"], ["b", "2"]]

2. 使用 reduce() 归纳为目标对象

若需输出为对象，可以在分割之后使用 Array.prototype.reduce() 进行结果累加。为了保证代码在生产环境下的稳健性，必须在处理前剔除空字符串判断：

function parseQueryStringToObject(queryStr) {
  // 防御空串或非法入参
  if (!queryStr || typeof queryStr !== 'string') return {};

  // 剔除可能存在的起始 "?" 符号
  const cleanStr = queryStr.replace(/^[?#]/, '');

  return cleanStr.split('&').reduce((accumulator, currentItem) => {
    if (!currentItem) return accumulator;
    
    const separatorIndex = currentItem.indexOf('=');
    let rawKey, rawVal;

    if (separatorIndex === -1) {
      // 应对无等号情况，例如 "a&b=2" 中的 a
      rawKey = currentItem;
      rawVal = "";
    } else {
      rawKey = currentItem.slice(0, separatorIndex);
      rawVal = currentItem.slice(separatorIndex + 1);
    }

    const key = decodeURIComponent(rawKey);
    const val = decodeURIComponent(rawVal);

    accumulator[key] = val;
    return accumulator;
  }, {});
}

console.log(parseQueryStringToObject("a=1&b=2"));
// 示例输出: { a: "1", b: "2" }

关键差异：两种解析方式在一致条件下的表现对比

在实际业务场景中，传入的字符串往往不总是规整的 "a=1&b=2"。对比 URLSearchParams 与纯 split 手动处理，理解它们在一致边界输入下的具体差异至关重要：

测试情境与输入示例	URLSearchParams + fromEntries	基础 split('&').split('=')	业务影响与建议
带前缀符号 `"?a=1&b=2"`	自动剔除前导 `?`，键正确为 `"a"`	未清洗时，首键会解析为带有问号的 `"?a"`	获取 `window.location.search` 时，URLSearchParams 更安全。手写 split 必须前置正则 `str.replace(/^\?/, '')`。
特殊字符与中文 `"name=%E5%BC%A0%E4%B8%89"`	底层规范原生进行 UTF-8 解码，输出 `"张三"`	若未显式调用 `decodeURIComponent`，仍为原始编码	URLSearchParams 避免了因遗漏解码而导致的乱码；但若遇到畸形 % 序列，两者均需做好防错捕获。
加号空格转换 `"title=hello+world"`	将 `+` 视为空格，输出 `"hello world"`	直接保留字符 `"+"`，输出 `"hello+world"`	QueryString 规范规定加号代表空格，手写版需视业务需求增加 `.replace(/\+/g, ' ')`。
同名重复键 `"item=1&item=2"`	`fromEntries` 后值覆盖前值，但可用 `.getAll('item')` 获取全部	默认直接对象属性赋值覆盖；但可自由在 `reduce` 中改写为数组聚合	对于复选框类列表参数，需结合场景确定是覆盖还是数组收拢。

常见边界问题与处理技巧

● 边界提醒：所有解析出来的属性值默认均为 string 类型

无论使用何种解析方案，"a=1&b=2" 解析后的结果均是字符串 { a: "1", b: "2" }，而非数字 { a: 1, b: 2 }。若需要参与数学运算，应当在获取后进行显式转换（如 Number(obj.a)），或者在解析规约中加入类型检测。

1. 多值同名参数的数组化合并

当参数出现多次（例如多选过滤 "tag=js&tag=react&user=tom"）时，若直接使用 Object.fromEntries，属性 tag 最终只保留 "react"。若需要完整保留为数组，可对 URLSearchParams 进行定制循环提取：

function parseParamsWithMultiValues(str) {
  const params = new URLSearchParams(str);
  const result = {};

  for (const [key, value] of params.entries()) {
    if (result.hasOwnProperty(key)) {
      // 如果已存在同名键，转换为数组追加
      result[key] = [].concat(result[key], value);
    } else {
      result[key] = value;
    }
  }
  return result;
}

console.log(parseParamsWithMultiValues("tag=js&tag=react&user=tom"));
// 示例输出: { tag: ["js", "react"], user: "tom" }

2. 空值与缺失等号的边界表现

面对形如 "a=&b" 的非典型字符串，URLSearchParams 的标准处理规则是：

"a="：键为 "a"，值为空字符串 ""。
"b"：键为 "b"，值依然为空字符串 ""。

这种行为符合标准规范。如果你的业务要求无等号参数必须当成布尔值 true（如命令行参数风格），则更适合采用第二节的手写 reduce 进行个性化定制。

总结

将 JavaScript 字符串 "a=1&b=2" 转换为数组或对象，在现代开发中首选 URLSearchParams：

转对象：直接调用 Object.fromEntries(new URLSearchParams(str))，语义清晰且自动完成字符解码。
转数组：直接使用扩展运算 [...new URLSearchParams(str)] 获得二维条目数组，便于遍历与流式处理。
特殊场景：当面对参数重复聚合、定制类型强制转换或极度严苛的老旧环境时，采用 split() 搭配 reduce() 手工解析具备更强的数据定制空间。