如何将JS计算结果格式化为两位小数？订单总价显示异常求助

问题 #

我用下面的代码从div获取两个数字字符串相加，在另一个div显示结果。功能基本正常，但相加2.50与2.00时，结果显示为4.5。试过toFixed()但没成功，请问怎么把结果格式化为两位小数？

HTML代码 #

</div>
<div class="C selectt form-group mb-4"> 
  <select id="clientOrder" type="pickup" name="message" class="form-control" required>
    <option disabled selected value>Please select an item</option>
    <option data-price="3.00">Item 1</option>
    <option data-price="6.00">Item 2</option>
    <option data-price="5.00">Item 3</option>
    <option data-price="9.00">Item 4</option>
  </select>
</div>
<!-- **** Sides Table ****  -->
<div class="sidesContainer form-group mb-4 w-100" id="sidesContainer">
  <table class="sides">
    <caption>Add Your Sides</caption>
    <tr>
      <td><input type="checkbox" value="" id="side1" data-price="2.50" class="item"><label for="side1">Side 1</label></td>
      <td><input type="checkbox" value="" id="side2" data-price="2.50" class="item"><label for="side2">Side 2</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="" id="side3" data-price="2.50" class="item"><label for="side3">Side 3</label></td>
      <td><input type="checkbox" value="" id="side4" data-price="2.50" class="item"><label for="side4">Side 4</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="" id="side5" data-price="2.50" class="item"><label for="side5">Side 5</label></td>
      <td><input type="checkbox" value="" id="side6" data-price="2.50" class="item"><label for="side6">Side 6</label></td>
    </tr>
  </table>
</div>
<!-- **** Order Total **** -->
<div class="sidesContainer form-group mb-4 w-100" hidden>Your total is $<span id="sum0" class="item"></span></div>
<div class="sidesContainer form-group mb-4 w-100" hidden>Your total is $<span id="sum1" class="item"></span></div>
<div class="sidesContainer form-group mb-4 w-100">Your total is $<span id="sum"></span></div>

JavaScript代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// **** Sides Values ****
$(document).ready(function() {
  $('#sidesContainer').on('change', function() {
    update_total();
        $('#sum').text(parseFloat($('#sum0').text()) +  parseFloat($('#sum1').text()));
  });

  function update_total() {
    var tot = 0;
    var price = 0;
    $('#sidesContainer input:checked').each(function() {
      price = parseFloat($(this).data('price'));
      if (price > 0) {      
        tot += +price;
      }
    });
    $('#sidesContainer select').each(function() {
      price = parseFloat($("option:selected", this).data('price')).toFixed(2);
      if (price > 0) {
        tot += price;
      }
    });
    $('#sum0').html(tot.toFixed(2));
  }
  update_total();
});

// **** Items Values ****

$(document).ready(function() {
  $('#clientOrder').on('change', function() {
    update_sum();
        $('#sum').text(parseFloat($('#sum0').text()) +  parseFloat($('#sum1').text()));
  });

  function update_sum() {
    var tot = 0;
    var price = 0;
    $('#clientOrder option:selected').each(function() {
      price = parseFloat($(this).data('price'));
      if (price > 0) {      
        tot += +price;
      }
    });
    $('#clientOrder select').each(function() {
      price = parseFloat($("option:selected", this).data('price')).toFixed(2);
      if (price > 0) {
        tot += price;
      }
    });
    $('#sum1').html(tot.toFixed(2));
  }
  update_sum();
});
</script>

解决方案 #

问题核心 #

你在最终求和后没有对结果调用toFixed(2)，导致数值默认以最简形式显示；同时代码存在冗余的无效循环逻辑。

修改步骤 #

1. 给最终求和结果添加toFixed(2)
   将两处设置#sum文本的代码修改为：

   $('#sum').text((parseFloat($('#sum0').text()) + parseFloat($('#sum1').text())).toFixed(2));
   

   这样计算后的数值会强制保留两位小数，比如4.5会转换成"4.50"后再插入DOM。

2. 移除冗余无效代码
   删除update_total和update_sum函数中以下循环块：

   $('#sidesContainer select').each(function() {
     price = parseFloat($("option:selected", this).data('price')).toFixed(2);
     if (price > 0) {
       tot += price;
     }
   });
   

   和

   $('#clientOrder select').each(function() {
     price = parseFloat($("option:selected", this).data('price')).toFixed(2);
     if (price > 0) {
       tot += price;
     }
   });
   

   因为#sidesContainer内没有select元素，#clientOrder本身就是select，这两个循环属于无效逻辑，还可能引发字符串拼接错误。

优化后的完整JavaScript代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// **** Sides Values ****
$(document).ready(function() {
  $('#sidesContainer').on('change', function() {
    update_total();
    $('#sum').text((parseFloat($('#sum0').text()) + parseFloat($('#sum1').text())).toFixed(2));
  });

  function update_total() {
    var tot = 0;
    var price = 0;
    $('#sidesContainer input:checked').each(function() {
      price = parseFloat($(this).data('price'));
      if (price > 0) {      
        tot += price;
      }
    });
    $('#sum0').html(tot.toFixed(2));
  }
  update_total();
});

// **** Items Values ****
$(document).ready(function() {
  $('#clientOrder').on('change', function() {
    update_sum();
    $('#sum').text((parseFloat($('#sum0').text()) + parseFloat($('#sum1').text())).toFixed(2));
  });

  function update_sum() {
    var tot = 0;
    var price = 0;
    $('#clientOrder option:selected').each(function() {
      price = parseFloat($(this).data('price'));
      if (price > 0) {      
        tot += price;
      }
    });
    $('#sum1').html(tot.toFixed(2));
  }
  update_sum();
});
</script>

额外说明 #

• toFixed(2)返回字符串类型，适合直接作为文本插入DOM，确保小数部分始终显示两位，即使是0也不会省略。
• 避免在计算过程中过早使用toFixed，因为它返回的是字符串，直接相加会触发字符串拼接而非数值计算，容易出现错误。

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