如何在JavaScript中正确累加费用数值总和？解决字符串拼接问题

我是JavaScript初学者，尝试累加HTML表格中class为expenses_value的单元格内的费用数值，但代码执行后并未得到求和结果，而是将数值进行了字符串拼接。以下是我的相关代码：

HTML代码 #

<table>
    <tr>
        <th>Expenses Title</th>
        <th>Expense Value</th>
        <th></th>
    </tr>
    
    <tr>
        <td>egg</td>
        <td class="expenses_value">350</td>
        <td>Edit</td>
        <td class="remove_button">Delete</td>
    </tr>
    <tr>
        <td>Bread</td>
        <td class="expenses_value">340</td>
        <td>Edit</td>
        <td class="remove_button">Delete</td>
    </tr>
    <tr>
        <td>fish</td>
        <td class="expenses_value">90</td>
        <td>Edit</td>
        <td class="remove_button">Delete</td>
    </tr>

</table>

原JavaScript代码 #

let expense_value = document.getElementsByClassName("expenses_value");
let sum = 0
for(let i = 0; i < expense_value.length; i++){
   let newVal = expense_value[i].innerHTML;
   sum = sum + newVal;
   console.log(sum)
}

核心问题是从DOM获取的innerHTML是字符串类型，直接用+运算符会触发字符串拼接逻辑，而非数值加法。只需将字符串转为数值类型即可解决：

方法1：使用parseInt（适用于整数场景） #

let expense_value = document.getElementsByClassName("expenses_value");
let sum = 0;
for(let i = 0; i < expense_value.length; i++){
   // 第二个参数10强制使用十进制解析，避免八进制等异常情况
   let newVal = parseInt(expense_value[i].innerHTML, 10);
   sum += newVal; // 等同于sum = sum + newVal
   console.log(sum);
}

方法2：使用Number()或+前缀（支持整数/浮点数） #

如果费用可能包含小数，推荐用Number()或+前缀，兼容性更好：

let expense_value = document.getElementsByClassName("expenses_value");
let sum = 0;
for(let i = 0; i < expense_value.length; i++){
   // 两种方式二选一
   let newVal = Number(expense_value[i].innerHTML);
   // let newVal = +expense_value[i].innerHTML;
   sum += newVal;
   console.log(sum);
}

1. 优先使用querySelectorAll：getElementsByClassName返回动态集合，DOM变化时会自动更新，可能引发意外；querySelectorAll返回静态NodeList，更稳定：

   const expenseItems = document.querySelectorAll(".expenses_value");
   

2. 用数组方法简化代码：借助Array.from将NodeList转为数组，结合map和reduce实现更简洁的求和逻辑，符合现代JavaScript风格：

   const sum = Array.from(document.querySelectorAll(".expenses_value"))
     .map(item => {
       // 处理非数值情况，避免NaN导致求和失败
       const num = Number(item.textContent);
       return isNaN(num) ? 0 : num;
     })
     .reduce((total, current) => total + current, 0);
   
   console.log(sum); // 输出780
   

3. 使用textContent替代innerHTML：如果单元格内只有纯文本，textContent比innerHTML更安全，不会解析HTML标签，性能也更好。

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