如何处理URL中大小写不同的查询参数变量取值问题？

嘿，我懂你现在的需求——要兼容URL里id和Id这两种大小写不同的查询参数对吧？你的现有思路是可行的，但可以优化得更简洁优雅，避免重复的判断逻辑~

问题分析 #

你当前的代码通过分别判断params['id']和params['Id']来获取参数值，虽然能解决问题，但如果后续需要兼容更多大小写变体（比如ID），代码会变得冗余且不易维护。而且重复的Number()转换也可以统一处理。

优化方案1：统一参数键的大小写（推荐，扩展性强） #

我们可以把所有查询参数的键统一转换为小写（或大写），这样不管参数名是id、Id还是ID，都能通过同一个键名获取值：

private findQueryParams() {
  this._router.queryParams.subscribe((params: Params) => {
    if (Object.keys(params).length) {
      // 将所有参数键转为小写，生成新的参数对象
      const lowerCaseParams = Object.fromEntries(
        Object.entries(params).map(([key, value]) => [key.toLowerCase(), value])
      );
      // 统一获取id参数，处理非数字情况
      const idValue = lowerCaseParams['id'] ?? 0;
      const id = !isNaN(Number(idValue)) ? Number(idValue) : 0;
      
      // 这里添加你的后续业务逻辑，比如把id赋值给组件变量
      // this.currentId = id;
    }
  });
}

这个方案的好处是：哪怕以后要兼容其他大小写形式的参数名，代码不需要做任何修改，直接通过小写的键名就能获取。

优化方案2：简化双参数判断（仅针对id和Id） #

如果确定只需要兼容这两种大小写形式，也可以用空值合并运算符来简化判断逻辑：

private findQueryParams() {
  this._router.queryParams.subscribe((params: Params) => {
    if (Object.keys(params).length) {
      // 先取id，不存在则取Id，都没有则用0，再转换为数字
      const idRaw = params['id'] ?? params['Id'] ?? 0;
      const id = !isNaN(Number(idRaw)) ? Number(idRaw) : 0;
      
      // 后续业务逻辑
    }
  });
}

额外注意点 #

如果URL里的参数值可能是非数字内容（比如id=abc），一定要加上isNaN的判断，避免id变成NaN影响后续逻辑。

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