JavaScript如何实现$15.000,00格式的财务金额展示功能

原代码存在的问题 #

• 正则替换参数语法错误：所有replace方法的第二个参数缺失起始双引号，属于语法层面的错误，会导致函数运行异常
• 千位分隔规则匹配范围有限：现有正则仅能匹配9位、6位长度的数字，不足6位的数字无法触发千位分隔逻辑
• 缺失货币符号拼接逻辑，无法输出带$前缀的格式

修复代码 #

自定义函数版（兼容老旧环境） #

function mascaraValor(valor) {
    valor = Number(valor).toFixed(2).replace(/\D/g,"");
    // 递归处理所有位数的千位分隔
    while (/(\d+)(\d{3})/.test(valor)){
        valor = valor.replace(/(\d+)(\d{3})/, '$1.$2');
    }
    // 替换小数位分隔符为逗号
    valor = valor.replace(/(\d)(\d{2})$/, '$1,$2');
    return '$' + valor;
}

var cunitario = document.getElementsByClassName("valor1");
var element = document.getElementsByClassName("valoranual1");
var vanual =  parseFloat(cunitario[0].innerHTML.replace(",", ".")) * 12;
element[0].innerHTML = mascaraValor(vanual);

原生API版（更稳定，无正则兼容问题） #

直接调用JS内置的国际化格式化API，自动适配指定的金额格式，无需手动处理分隔逻辑：

var cunitario = document.getElementsByClassName("valor1");
var element = document.getElementsByClassName("valoranual1");
var vanual =  parseFloat(cunitario[0].innerHTML.replace(",", ".")) * 12;
// 指定区域为pt-BR实现千位用.、小数用,的格式，货币类型为USD输出$前缀
element[0].innerHTML = new Intl.NumberFormat('pt-BR', { 
    style: 'currency', 
    currency: 'USD' 
}).format(vanual);

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