如何将多个div中的数值求和后输出到总div并格式化为美元货币

算力阿峰

2026-10-8

实现方案

核心思路

先从三个函数返回的带格式美元字符串中提取纯数值并求和
用JS内置的国际化API将结果格式化为美元货币格式，直接写入id为c4的节点

代码示例

你提供的原始HTML结构

<div id="c1">$10,000</div>
<div id="c2">$21,500</div>
<div id="c3">$1,550</div>
<div id="c4">Total</div>

JS实现代码

// 你提到的三个独立返回值函数示例
function c1() {
  return document.getElementById('c1').textContent;
}
function c2() {
  return document.getElementById('c2').textContent;
}
function c3() {
  return document.getElementById('c3').textContent;
}

// 数值提取工具函数：过滤掉$、千位分隔符等非数字字符
function getPureNumber(formattedStr) {
  return Number(formattedStr.replace(/[^0-9.]/g, ''));
}

// 求和计算
const total = getPureNumber(c1()) + getPureNumber(c2()) + getPureNumber(c3());

// 格式化为美元货币格式，当前配置为无小数位
const formattedTotal = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0, // 需要保留两位小数的话删除这行即可
}).format(total);

// 写入c4节点
document.getElementById('c4').textContent = formattedTotal;