JS校验number类型无效值时如何排除0 解决!num误判0问题

核心问题定位 #

现有代码存在两处逻辑错误：

• 假值判断误判：JS中!num会将0、NaN、空字符串、false等所有假值全部判定为无效，无法区分null/undefined无效值和0/0.0/0.00类有效值
• 渲染条件写反：原逻辑num === null && 组件代表「仅当num严格等于null时才渲染内容」，会导致有效值0、正常金额、undefined场景下完全不渲染内容

第一步：修正货币格式化函数 #

不要用真假值逻辑判断无效值，精准匹配null和undefined两类场景即可，同时补全两位小数的标准货币格式化逻辑：

const currencyFormat = (num) => {
  // 仅拦截null、undefined为无效值，以下两种写法等价，都不会误判0：
  // 显式写法：if (num === null || num === undefined)
  // 简写（JS行业公认安全写法，双等判断下仅null和undefined互等）
  if (num == null) {
    return "0.00";
  }
  // 统一转数值后保留两位小数，适配所有金额场景
  return `$${Number(num).toFixed(2)}`;
}

第二步：修正渲染层逻辑 #

移除错误的num === null渲染拦截条件，所有场景下直接渲染组件即可，无效值兜底已经在格式化函数内处理：

// 移除原错误的num === null判断，所有场景（含0、null、undefined、正常金额）均正常渲染
<div>
  <h1>{currencyFormat(num)}</h1>
</div>

场景验证结果 #

修正后所有场景均符合需求：

• 传入null/undefined：命中无效值兜底，展示0.00
• 传入0/0.0/0.00：判定为有效值，格式化后展示$0.00，不会被错误拦截
• 传入正常数值（如12.3、99）：格式化后展示$12.30、$99.00，符合货币展示规范

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