ExtJs（JavaScript）中列求和出现NaN问题的排查与解决

使用下方JavaScript代码计算表格列总和时，有时能得到正确结果，有时却返回NaN。所有列值均为整数（由行求和得到），示例如下：

错误情况 #

正常情况 #

现有渲染代码 #

summaryRenderer: function(val, params, data, metaData) {

if(val !== null && val !==undefined && val !=="" && val !== NaN ){
  return '<span style=color:#00B2EE;font-weight:bold;text-align: center;>'+val+'</span>' ;
}

核心问题分析 #

1. NaN判断逻辑失效：JavaScript中NaN与任何值（包括自身）比较都会返回false，所以val !== NaN这个条件永远无法触发，根本拦不住NaN的情况。
2. 未处理值类型转换：即使列值是整数，也可能以字符串形式传入（比如从DOM读取或组件内部处理时的类型偏差），直接拼接会保留原始类型问题，甚至导致计算时出现NaN。

修复后的代码 #

summaryRenderer: function(val, params, data, metaData) {
  // 将值转换为数字类型，统一处理
  const numVal = Number(val);
  
  // 有效数字判断：排除NaN、null、空串、undefined
  if (!Number.isNaN(numVal) && val !== null && val !== undefined && val !== "") {
    return '<span style="color:#00B2EE;font-weight:bold;text-align:center;">Sum : ' + numVal + '</span>';
  }
  
  // 处理无效值，返回明确的默认结果
  return '<span style="color:#00B2EE;font-weight:bold;text-align:center;">Sum : 0</span>';
}

关键改进说明 #

• 替换NaN判断方式：用Number.isNaN(numVal)替代无效的val !== NaN，Number.isNaN只会在值确实是NaN时返回true，不会把非数字的有效内容（如字符串数字）误判。
• 统一类型转换：先把val转为数字类型numVal，确保展示的是标准数字格式，避免类型混乱导致的异常。
• 增加默认返回逻辑：当值无效时，返回Sum : 0（或你需要的其他提示），避免出现NaN影响页面展示。

额外排查方向 #

如果修复后仍有问题，需要检查表格组件的求和逻辑本身：

• 确认所有行的列值都是纯整数，没有隐藏的空格、特殊字符（比如换行、全角符号）。
• 检查表格组件的列配置，确保该列被设置为数字类型，组件内部求和时会自动处理类型转换。

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