JavaScript计算能耗数据总和时出现数值拼接错误的问题排查

我正在开发一款工具，允许用户通过<select>选择空间类型（如办公室、仓库、存储区等），计算每平方英尺的kWh用量、kWh成本、燃料用量、燃料成本。燃料类型为天然气，其余归为其他类别。

<option>标签的value属性根据空间类型存储多个值，例如办公室的选项为：

<option value="21|0.099|25|0.091">Office</option>

通过.split()函数将其拆分为数组，示例代码：

$("#space-type-1 option:selected").val().split("|");

我使用display: table创建了一个包含表头和4行数据的表格，表头包含空间类型、建筑面积、kWh用量、kWh成本、燃料用量、燃料成本。

第一列计算正常，但在将前三行的列值相加求总计时，数值显示异常。例如，第一行的kWh用量为9400，经toLocaleString()格式化为9,400，第二行数值为26000，相加后得到26009而非34500。

以下是我的计算代码：

// Calculate total kWh Usage
var r1 = parseFloat(stVal[0] * fa1);
var r2 = $("#kwh-used-2").text();
var r3 = $("#kwh-used-3").text() > 0
            ? parseFloat($("#kwh-used-3").text())
            : parseFloat(0);
var tkwhUsed = (r1 + r2 + r3);
$("#total-kwh-used").text(tkwhUsed.toLocaleString("en-US", {style:"decimal", maximumFractionDigits:"0"}));


// Calculate total kWH Cost
r1 = parseFloat(stVal[1] * fa1);
r2 = $("#kwh-cost-2").text() > 0
        ? parseFloat($("#kwh-cost-2").text())
        : parseFloat(0);
r3 = $("#kwh-cost-3").text() > 0
        ? parseFloat($("#kwh-cost-3").text())
       : parseFloat(0);
var tkwhCost = (r1 + r2 + r3)
$("#total-kwh-cost").text(tkwhCost);

请问我哪里出错了？

核心错误 #

1. 未处理千分位逗号：DOM中显示的数值是带千分位逗号的格式化字符串（比如"26,000"），直接用parseFloat转换会只取逗号前的部分（得到26），导致计算错误。
2. 变量类型未统一：kWh用量计算里的r2直接用字符串参与运算，触发了字符串拼接逻辑，进一步放大错误。

修复步骤 #

• 先移除数值字符串中的千分位逗号，再转换为数字
• 确保所有参与运算的变量都被转换为数值类型

修正后的代码 #

// 工具函数：处理带千分位的数字字符串，转换为有效数值
function parseFormattedNumber(str) {
  if (!str) return 0;
  // 移除所有逗号后转换为浮点数，无效值默认返回0
  return parseFloat(str.replace(/,/g, "")) || 0;
}

// Calculate total kWh Usage
var r1 = parseFloat(stVal[0] * fa1) || 0;
var r2 = parseFormattedNumber($("#kwh-used-2").text());
var r3 = parseFormattedNumber($("#kwh-used-3").text());
var tkwhUsed = r1 + r2 + r3;
$("#total-kwh-used").text(tkwhUsed.toLocaleString("en-US", {style:"decimal", maximumFractionDigits:"0"}));


// Calculate total kWH Cost
r1 = parseFloat(stVal[1] * fa1) || 0;
r2 = parseFormattedNumber($("#kwh-cost-2").text());
r3 = parseFormattedNumber($("#kwh-cost-3").text());
var tkwhCost = r1 + r2 + r3;
$("#total-kwh-cost").text(tkwhCost.toLocaleString("en-US", {style:"currency", currency:"USD"})); // 可选：给成本加上货币格式化

额外建议 #

• 尽量不要直接从DOM文本中读取数值做计算，建议把原始数值存在变量或DOM的data-*属性中，避免格式化后的字符串干扰运算
• 给所有数值转换加上默认值（比如|| 0），防止空值或无效值导致计算结果为NaN

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