如何对对象数组中的订单总价执行加法而非拼接操作？

嘿，这个问题我见过好多开发者碰到过——本质就是字符串类型的金额和JavaScript里+运算符的特性冲突搞的鬼！

为什么会出现拼接而不是加法？ #

JavaScript里的+运算符有两个作用：如果两边都是数字，它做加法；但只要有一边是字符串，它就会把另一边也转成字符串，然后做拼接操作。你的订单总价应该是存在数组对象里的字符串（比如"19.99"、"25.50"这种），所以累加的时候就变成了字符串拼接。

举个你可能正在用的错误代码例子：

const orders = [{ total: "19.99" }, { total: "25.50" }, { total: "10.00" }];
let totalSum = 0;
for (const order of orders) {
  totalSum += order.total; // 结果会是"019.9925.5010.00"，完全不是你要的总和！
}

几种快速解决的方法 #

核心思路就是先把字符串类型的总价转换成数字类型，再进行累加。这里给你几个常用的方案：

1. 循环累加时手动转换

• 用parseFloat()（最适合处理带小数的金额，自动忽略字符串开头的非数字字符）：

  const orders = [{ total: "19.99" }, { total: "25.50" }, { total: "10.00" }];
  let totalSum = 0;
  for (const order of orders) {
    totalSum += parseFloat(order.total);
  }
  console.log(totalSum); // 输出55.49
  

• 用Number()转换：

  totalSum += Number(order.total);
  

• 用一元加号+快速转换（语法最简洁）：

  totalSum += +order.total;
  

2. 用数组reduce方法更简洁

如果你喜欢函数式编程的写法，reduce可以一行搞定：

const orders = [{ total: "19.99" }, { total: "25.50" }, { total: "10.00" }];
const totalSum = orders.reduce((accumulator, currentOrder) => {
  return accumulator + parseFloat(currentOrder.total);
}, 0); // 第二个参数0是累加器的初始值，必须传，不然会出问题！
console.log(totalSum); // 输出55.49

3. 处理带格式的金额（比如带$符号）

如果你的总价字符串带货币符号（比如"$19.99"），先清理掉符号再转换：

totalSum += parseFloat(order.total.replace(/^\$/, ''));

额外小提醒 #

计算金额时，因为JavaScript的浮点数精度问题，可能会出现类似0.1 + 0.2 = 0.30000000000000004的情况。如果要精确计算，可以用toFixed()保留小数位：

console.log(totalSum.toFixed(2)); // 输出"55.49"，转成字符串保留两位小数

内容的提问来源于stack exchange，提问作者Clay T.