苹果面试题：JavaScript实现URL查询字符串转对象

题目要求：输入URL字符串http://www.apple.com?a=1&b=2&c=3，不硬编码参数键名，输出格式为{a:1, b:2, c:3}的普通对象。

方案1：使用原生URL构造函数（推荐） #

这是JS原生提供的URL处理API，浏览器、Node.js环境均原生支持，无需额外依赖，也不需要硬编码任何参数规则，自动适配任意查询参数结构。
实现代码：

function parseQuery(url) {
  const params = new URL(url).searchParams;
  const res = {};
  for (const [key, val] of params.entries()) {
    // 自动把数值类字符串转成数字类型，非数值保留原字符串
    res[key] = isNaN(Number(val)) ? val : Number(val);
  }
  return res;
}

// 测试用例
const input = 'http://www.apple.com?a=1&b=2&c=3';
console.log(parseQuery(input)); // 输出 {a: 1, b: 2, c: 3}

方案优势：自动处理URL编码、特殊字符、参数值带=/?等边界场景，代码简洁鲁棒，覆盖所有现代运行环境。

方案2：不依赖URL构造函数的手写实现 #

如果不了解URL构造函数，可以通过原生字符串操作实现通用解析逻辑，全程不硬编码参数键名，适配任意合法URL格式。
核心实现逻辑：

• 定位URL中?的位置，截取后面的查询字符串部分，提前过滤掉#开头的哈希片段
• 按&拆分查询字符串，得到每一组独立的键值对
• 对每组键值对按=拆分，分别解码键名和值的URL编码
• 对值做类型判断，数值类内容转成Number类型后存入结果对象

实现代码：

function parseQueryManual(url) {
  const res = {};
  const queryStart = url.indexOf('?');
  // 无查询参数直接返回空对象
  if (queryStart === -1) return res;
  // 截取查询串，同时剔除哈希部分
  const searchPart = url.slice(queryStart + 1).split('#')[0];
  const paramList = searchPart.split('&');

  for (const item of paramList) {
    // 跳过空参数项（比如连续&&的异常场景）
    if (!item) continue;
    const [key, rawVal] = item.split('=');
    const decodeKey = decodeURIComponent(key);
    const decodeVal = decodeURIComponent(rawVal ?? '');
    // 类型转换
    res[decodeKey] = isNaN(Number(decodeVal)) ? decodeVal : Number(decodeVal);
  }
  return res;
}

// 测试用例
const input = 'http://www.apple.com?a=1&b=2&c=3';
console.log(parseQueryManual(input)); // 输出 {a: 1, b: 2, c: 3}

注意：手写基础版本仅覆盖常规场景，如果要适配生产环境复杂情况，还需要补充同名多参数、参数值为空、非法编码等边界逻辑的处理。

内容的提问来源于stack exchange，提问作者Lyon