面试官你好，请您听我“编解”！！！

面试复盘：URL参数解析

引言

在前端面试中，对URL参数的解析是常见的考察点。这不仅考验面试者对字符串操作的熟练度，更深层次地，它能反映出面试者对URL结构、编码解码以及边界情况处理的理解。本文将复盘一道经典的URL参数解析题目，从题目描述、考察方向、解题思路到代码详解，希望能帮助大家更好地掌握这一知识点。

题目描述

请实现一个获取浏览器地址中参数的方法。

可选用的API: encodeURIComponent, decodeURIComponent, escape, unescape, encodeURI, decodeURI

perl 复制代码

const getURLParam = (url, paramName) => {
  // 请在这里实现代码
  return undefined;
};

/** 测试用例 */
const url = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu';
const param1 = getURLParam(url, 'tn');
console.log(param1); // baidu
const param2 = getURLParam(url, 'ie');
console.log(param2); // utf-8

const url2 = 'http://hbos-section-dev.cfuture.shop:8000/?name=%E5%BC%A0%E4%B8%89&age=18&gender=%7B%22key%22%3A1%2C%22value%22%3A%22%E7%94%B7%22%7D&cardNo=%E5%8C%BB%E4%BF%9D1&cardNo=%E7%A4%BE%E4%BF%9D2&address=%E5%A4%A9%E5%BA%9C%E4%BA%8C%EF%BC%9F%E4%B8%89%E8%A1%97';
const cardNo = getURLParam(url2, 'cardNo');
console.log(cardNo); //["医保1","社保2"]
const gender = getURLParam(url2, 'gender');
console.log(gender); // {"key":1,"value":"男"}
const address = getURLParam(url2, 'address');
console.log(address); // 天府二?三街

考察方向

这道题目主要考察面试者以下几个方面的能力：

基础字符串操作能力 ：是否熟悉JavaScript中字符串的split、indexOf、substring等基本操作，能够有效地从URL中提取所需部分。
URL结构理解 ：是否清楚URL的组成部分，特别是查询字符串（query string）的格式，包括参数名-值对的组织方式（key=value）以及多个参数之间的分隔符（&）。
URL编码解码 ：对URL中特殊字符的编码（encodeURIComponent, encodeURI）和解码（decodeURIComponent, decodeURI）机制的理解和正确使用。面试者需要知道何时使用哪种编码解码函数，以及它们之间的区别。
边界情况处理：
- URL中没有查询参数的情况。
- 参数值为空的情况。
- 参数名重复的情况（例如题目中的cardNo）。
- 参数值本身包含特殊字符（如=、&）的情况。
- 参数值是JSON字符串的情况（例如题目中的gender）。
逻辑思维与问题解决能力：如何将复杂的问题分解为更小的、可管理的部分，并逐步构建解决方案。
代码健壮性与可读性：编写的代码是否考虑了各种异常情况，是否易于理解和维护。

解题思路

核心解题步骤

提取查询字符串 ：找到URL中 ? 的位置，截取后面的部分
分割参数 ：用 & 分割所有参数对
解析键值对 ：用 = 分割每个参数的键和值
参数匹配：找到所有匹配指定参数名的值
URL解码 ：使用 decodeURIComponent 解码参数值
JSON解析：尝试将参数值解析为JSON对象
返回处理：根据匹配结果数量决定返回格式

代码实现详解

javascript 复制代码

const getURLParam = (url, paramName) => {
  // 步骤1: 提取查询字符串部分
  const queryIndex = url.indexOf('?');
  if (queryIndex === -1) {
    return undefined; // 没有查询参数
  }
  
  const queryString = url.substring(queryIndex + 1);
  const params = queryString.split('&');
  const results = [];
  
  // 步骤2: 遍历所有参数
  for (let i = 0; i < params.length; i++) {
    const param = params[i];
    const equalIndex = param.indexOf('=');
    
    if (equalIndex === -1) continue; // 跳过无效参数
    
    const key = param.substring(0, equalIndex);
    const value = param.substring(equalIndex + 1);
    
    // 步骤3: 参数名匹配
    if (key === paramName) {
      // 步骤4: URL解码
      let decodedValue = decodeURIComponent(value);
      
      // 步骤5: 尝试JSON解析
      try {
        decodedValue = JSON.parse(decodedValue);
      } catch (e) {
        // 如果不是JSON格式，保持原字符串
      }
      
      results.push(decodedValue);
    }
  }
  
  // 步骤6: 根据结果数量返回不同格式
  if (results.length === 0) {
    return undefined;
  } else if (results.length === 1) {
    return results[0];
  } else {
    return results;
  }
};

算法复杂度

时间复杂度：O(n)，其中n为查询字符串的长度
空间复杂度：O(m)，其中m为匹配参数的数量

限制条件(API)

API	作用	编码范围	使用场景	示例
`encodeURIComponent`	编码URI组件	除了字母、数字、`-`、`_`、`.`、`!`、`~`、`*`、`'`、`(`、`)` 之外的所有字符	编码URL参数值，最常用	`encodeURIComponent("张三")` → `"%E5%BC%A0%E4%B8%89"`
`decodeURIComponent`	解码URI组件	解码所有百分号编码的字符	解码URL参数值，本题使用	`decodeURIComponent("%E5%BC%A0%E4%B8%89")` → `"张三"`
`encodeURI`	编码完整URI	除了字母、数字和 `;,/?:@&=+$-_.!~*'()#` 之外的字符	编码完整URL，保留URL结构字符	`encodeURI("http://example.com/张三")` → `"http://example.com/%E5%BC%A0%E4%B8%89"`
`decodeURI`	解码完整URI	解码URI中的百分号编码，但不解码保留字符	解码完整URL	`decodeURI("http://example.com/%E5%BC%A0%E4%B8%89")` → `"http://example.com/张三"`
`escape`	编码字符串（已废弃）	除了字母、数字、`@*_+-./` 之外的字符，使用十六进制转义	历史遗留，不推荐使用	`escape("张三")` → `"%u5F20%u4E09"`
`unescape`	解码字符串（已废弃）	解码escape编码的字符	历史遗留，不推荐使用	`unescape("%u5F20%u4E09")` → `"张三"`

注意：

encodeURIComponent/decodeURIComponent 是最常用的，适合处理URL参数
encodeURI/decodeURI 适合处理完整URL
escape/unescape 已被废弃，仅为兼容性保留

总结

通过这道面试题的复盘，我们可以看到，一个看似简单的URL参数解析问题，背后却隐藏着对JavaScript基础、URL规范、编码解码以及边界情况处理等多方面的考察。在实际开发和面试中，深入理解这些知识点，并能够编写出健壮、高效且易于维护的代码，是衡量一个前端开发者能力的重要标准。希望本文能为您在前端学习和面试的道路上提供一些帮助。

参考资料：

MDN Web Docs: encodeURIComponent()
MDN Web Docs: decodeURIComponent()
MDN Web Docs: URLSearchParams (虽然本题未使用，但了解现代API有助于拓宽思路)