parseFloat 没有给出确切的值答案

【问题标题】：parseFloat Doesn't Give Exact ValueparseFloat 没有给出确切的值
【发布时间】：2016-11-09 09:13:54
【问题描述】：

我正在做一个需要“提示框”计算系统的项目。正如您在代码 sn-p 中看到的，它不像我预期的那样工作。我该如何解决这个问题？

$("select[name='tip']").on('change',function(){
    var thiz = $(this);
    var content_credit = parseFloat($("#f_content_credit").text());
    var total_balance = parseFloat($("#f_total_balance").text());
    var tip = parseFloat(thiz.val());

    console.log(total_balance+"-"+content_credit+"-"+tip);
    
    $("#f_after_confirm").text(total_balance-content_credit-tip);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
    <tbody>
      <tr>
            <td> <strong>Total Balance</strong> </td>
            <td id='f_total_balance'> 45.67 </td>
        </tr>
      <tr>
            <td> <strong>Credit</strong> </td>
            <td id='f_content_credit'> 10.20 </td>
        </tr>
        <tr>
            <td> <strong>TIP BOX</strong></td>
            <td> 
                <select name="tip" class='form-control'>
                    <option value="0" selected>0 Kredi</option>
                    <option value="0.10">0.1 credit</option>
                    <option value="0.20">0.2 credit | not working</option>
                    <option value="0.30">0.3 credit</option>
                    <option value="0.80">0.8 credit</option>
                    <option value="1.20">1.2 credit | not working</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td>
            <td id='f_after_confirm'> 35.47 </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

这可以帮助你stackoverflow.com/questions/588004/…
欢迎来到浮点数学世界！注意parseFloat()是一个原生的JS方法。它与jQuery完全无关
@Alexis 我差点被当成骗子关门了
看起来toFixed 是您的最佳选择，因为它非常适合货币数字。
@Alexis 我不会说这在技术上是一个骗局，因为 OP 是在问“我该如何解决这个问题”，而不是“为什么会这样”

标签： javascript jquery parsefloat

【解决方案1】：

试试这样，小数点用toFixed()。

$("select[name='tip']").on('change',function(){
    var thiz = $(this);
    var content_credit = parseFloat($("#f_content_credit").text()).toFixed(2);
    var total_balance = parseFloat($("#f_total_balance").text()).toFixed(2);
    var tip = parseFloat(thiz.val()).toFixed(2);

    console.log(total_balance+"-"+content_credit+"-"+tip);
    
    $("#f_after_confirm").text(parseFloat(total_balance-content_credit-tip).toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
    <tbody>
      <tr>
            <td> <strong>Total Balance</strong> </td>
            <td id='f_total_balance'> 45.67 </td>
        </tr>
      <tr>
            <td> <strong>Credit</strong> </td>
            <td id='f_content_credit'> 10.20 </td>
        </tr>
        <tr>
            <td> <strong>TIP BOX</strong></td>
            <td> 
                <select name="tip" class='form-control'>
                    <option value="0" selected>0 Kredi</option>
                    <option value="0.10">0.1 credit</option>
                    <option value="0.20">0.2 credit | not working</option>
                    <option value="0.30">0.3 credit</option>
                    <option value="0.80">0.8 credit</option>
                    <option value="1.20">1.2 credit | not working</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td>
            <td id='f_after_confirm'> 35.47 </td>
        </tr>
    </tbody>
</table>

【讨论】：

0.2 和 1.2 选项仍然显示 OP 不期望的值。您需要在 #f_after_confirm 的 text() 中放置的值调用 toFixed()
@RoryMcCrossan 是的，同意您的意见，感谢您的通知，现在已更改。

【解决方案2】：

该问题是由于浮点计算不一致造成的。您可以在 cmets 中提到的链接 @Alexis here 阅读更多相关信息。

要解决您的实际问题，您可以对最终的求和值调用 toFixed()，以将其格式化为所需的小数位数。试试这个：

$("select[name='tip']").on('change', function() {
  var thiz = $(this);
  var content_credit = parseFloat($("#f_content_credit").text()).toFixed(2);
  var total_balance = parseFloat($("#f_total_balance").text()).toFixed(2);
  var tip = parseFloat(thiz.val()).toFixed(2);
  var final = (total_balance - content_credit - tip).toFixed(2);

  console.log(final);
  $("#f_after_confirm").text(final);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
  <tbody>
    <tr>
      <td> <strong>Total Balance</strong> 
      </td>
      <td id='f_total_balance'>45.67</td>
    </tr>
    <tr>
      <td> <strong>Credit</strong> 
      </td>
      <td id='f_content_credit'>10.20</td>
    </tr>
    <tr>
      <td> <strong>TIP BOX</strong>
      </td>
      <td>
        <select name="tip" class='form-control'>
          <option value="0" selected>0 Kredi</option>
          <option value="0.10">0.1 credit</option>
          <option value="0.20">0.2 credit | works now</option>
          <option value="0.30">0.3 credit</option>
          <option value="0.80">0.8 credit</option>
          <option value="1.20">1.2 credit | works now</option>
        </select>
      </td>
    </tr>
    <tr>
      <td> <strong>After Confirm Calculation</strong> 
        <br><small>Total Balance - Credit - Tip</small> 
      </td>
      <td id='f_after_confirm'>35.47</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

与Math.round(100 * tot) / 100; 一起使用，它将与.12 数字一起使用

$("select[name='tip']").on('change',function(){
    var thiz = $(this);
    var content_credit = parseFloat($("#f_content_credit").text());
    var total_balance = parseFloat($("#f_total_balance").text());
    var tip = parseFloat(thiz.val());
  var tot = total_balance-content_credit-tip;
var cal = Math.round(100 * tot) / 100;
    console.log(cal);
    
    $("#f_after_confirm").text(cal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
    <tbody>
      <tr>
            <td> <strong>Total Balance</strong> </td>
            <td id='f_total_balance'> 45.67 </td>
        </tr>
      <tr>
            <td> <strong>Credit</strong> </td>
            <td id='f_content_credit'> 10.20 </td>
        </tr>
        <tr>
            <td> <strong>TIP BOX</strong></td>
            <td> 
                <select name="tip" class='form-control'>
                    <option value="0" selected>0 Kredi</option>
                    <option value="0.10">0.1 credit</option>
                    <option value="0.20">0.2 credit | not working</option>
                    <option value="0.30">0.3 credit</option>
                    <option value="0.80">0.8 credit</option>
                    <option value="1.20">1.2 credit | not working</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td>
            <td id='f_after_confirm'> 35.47 </td>
        </tr>
    </tbody>
</table>

【讨论】：