如何将JS输入计算结果格式化为货币格式？

问题分析 #

你现有的formatCurrency函数是针对用户输入的输入框设计的——它读取输入框的字符串值再做格式化处理，但你的计算逻辑是直接把数值（如9000）赋值给结果输入框，不符合该函数的处理预期，因此无法自动触发格式化。

方法一：新增数值转货币格式的函数（推荐） #

基于你已有的formatNumber函数，新增一个直接将数值转换为货币格式字符串的函数，计算后直接格式化结果：

// 新增：将数值转为货币格式字符串的函数
function numberToCurrency(num, blur = false) {
  if (isNaN(num) || num === '') return '';
  
  let input_val = num.toString();
  
  if (input_val.indexOf(".") >= 0) {
    const decimal_pos = input_val.indexOf(".");
    let left_side = input_val.substring(0, decimal_pos);
    let right_side = input_val.substring(decimal_pos + 1);

    left_side = formatNumber(left_side);
    right_side = formatNumber(right_side);
    
    if (blur) {
      right_side += "00";
    }
    right_side = right_side.substring(0, 2);

    return "$" + left_side + "." + right_side;
  } else {
    input_val = formatNumber(input_val);
    let result = "$" + input_val;
    if (blur) {
      result += ".00";
    }
    return result;
  }
}

// 修改原计算代码，使用新函数格式化结果
$(document).ready(function(){
    const val1 = +$(".value1").val();
    const val2 = +$(".value2").val();
    $("#result").val(numberToCurrency(val1 * val2, true));
});
$('.input').blur(function(){
    const val1 = +$(".value1").val();
    const val2 = +$(".value2").val();
    $("#result").val(numberToCurrency(val1 * val2, true));
});

方法二：复用现有格式化逻辑（触发事件） #

如果不想新增函数，先给结果输入框添加data-type="currency"属性（如<input id="result" data-type="currency">），然后在赋值后手动触发blur事件，让现有的formatCurrency处理：

$(document).ready(function(){
    const val1 = +$(".value1").val();
    const val2 = +$(".value2").val();
    $("#result").val(val1 * val2).trigger('blur');
});
$('.input').blur(function(){
    const val1 = +$(".value1").val();
    const val2 = +$(".value2").val();
    $("#result").val(val1 * val2).trigger('blur');
});

说明 #

• 方法一直接高效，不依赖DOM事件，适合批量处理数值格式化；
• 方法二更复用现有代码，但需要确保结果输入框具备data-type="currency"属性，且依赖事件触发逻辑。

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