val?.toLocaleString()与if判断undefined的区别及优劣对比

一、行为差异对比 #

1. 「无值」判定逻辑不同 #

• 第一种用可选链操作符?.：仅当val是null或undefined时，才会跳过toLocaleString()调用，此时val?.toLocaleString()返回undefined，最终结果是'£undefined'。
• 第二种用if(val)：判断的是val是否为「真值」——除了null/undefined，像0、空字符串''、false、NaN这类假值，都会触发直接返回val的分支，不会拼接£符号。

2. 典型场景的返回结果差异 #

举几个实际例子看区别：

二、哪种写法更可取？ #

完全看你的业务需求：

• 如果你认为「只要val不是null/undefined就算有值」（比如0、空字符串也需要显示£前缀）：第一种写法简洁，但要注意null/undefined时会返回奇怪的'£undefined'，建议优化成：

  // 优化版：null/undefined时返回原val，其他情况拼接£
  return val == null ? val : '£' + val.toLocaleString();
  

• 如果你认为「只有val是真值才算有值」（比如0、空字符串不需要显示£）：第二种写法符合需求，也可以简化成更紧凑的三元表达式：

  return val ? '£' + val.toLocaleString() : val;
  

另外补充：第一种写法的原生版本（未优化）存在明显缺陷——null/undefined时返回'£undefined'，这几乎不符合任何业务场景，所以不建议直接用原生写法。

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