javascript - JQuery 中的计算给出结果 "NaN"

Question

尝试使用 jquery 进行一些计算:

运行以下代码片段:输入值

Quantity as 1

Buy as 111

Sell as 111.22

结果将为NaN。

为什么会发生这种情况？如何解决这个问题？

function roundToTwo(num) {
  return +(Math.round(num + "e+2") + "e-2");
}


$("#quantity, #buy, #sell").on("change keyup paste", function() {
  var quantity = Number($('#quantity').val());
  var buy = Number($("#buy").val());
  var sell = Number($("#sell").val());


  var total_amnt_trade = roundToTwo((quantity * buy) + (quantity * sell));
  var brokerage_amnt_buy = ((buy * quantity) * 0.08) / 100;
  if (brokerage_amnt_buy >= 25) {
    var brokerage_buy = 25;
  } else {
    var brokerage_buy = brokerage_amnt_buy;
  }
  var brokerage_amnt_sell = ((sell * quantity) * 0.08) / 100;
  if (brokerage_amnt_sell >= 25) {
    var brokerage_sell = 25;
  } else {
    var brokerage_sell = brokerage_amnt_sell;
  }
  var brokerage = roundToTwo(brokerage_buy + brokerage_sell); //brokerage
  var transaction_charges = roundToTwo((((buy * quantity) + (sell * quantity)) * 0.00325) / 100); //Transaction Charges
  var gst = roundToTwo((((transaction_charges * 18) / 100) + (brokerage * 18) / 100)); //GST

  var total_charges = roundToTwo(brokerage + transaction_charges + gst);
  var pnl = roundToTwo(((sell - buy) * quantity) - total_charges);

  $('#pnl_display').text(pnl);


})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="table table-borderless">
  <tbody>
    <tr style="text-align: center;">
      <td><b>Quantity</b></td>
      <td><b>Buy</b></td>
      <td><b>Sell</b></td>
    </tr>
    <tr>
      <td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
      <td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
      <td><input type="number" class="form-control" id="sell" placeholder="Sell Amount" name="sell"></td>
    </tr>

    <tr id="pnl_color">
      <td><span id="pnl_text_display">Profit / Loss</span></td>
      <td><span id="pnl_display"></span></td>
    </tr>

  </tbody>
</table>

运行上面的代码片段:输入值

Quantity as 1

Buy as 111

Sell as 111.22

结果将为NaN。

为什么会发生这种情况？如何解决这个问题？

Answer 1

您可以使用.tofixed(2)代替roundToTwo，然后问题就解决了。因为您的答案返回 e (-1.1379786002407855e-15)，所以它显示 NaN。

 var pnl = parseFloat(((sell - buy) * quantity) - total_charges).toFixed(2);

function roundToTwo(num) {
  return +(Math.round(num + "e+2") + "e-2");
}


$("#quantity, #buy, #sell").on("change keyup paste", function() {
  var quantity = Number($('#quantity').val());
  var buy = Number($("#buy").val());
  var sell = Number($("#sell").val());


  var total_amnt_trade = roundToTwo((quantity * buy) + (quantity * sell));
  var brokerage_amnt_buy = ((buy * quantity) * 0.08) / 100;
  if (brokerage_amnt_buy >= 25) {
    var brokerage_buy = 25;
  } else {
    var brokerage_buy = brokerage_amnt_buy;
  }
  var brokerage_amnt_sell = ((sell * quantity) * 0.08) / 100;
  if (brokerage_amnt_sell >= 25) {
    var brokerage_sell = 25;
  } else {
    var brokerage_sell = brokerage_amnt_sell;
  }
  var brokerage = roundToTwo(brokerage_buy + brokerage_sell); //brokerage
  var transaction_charges = roundToTwo((((buy * quantity) + (sell * quantity)) * 0.00325) / 100); //Transaction Charges
  var gst = roundToTwo((((transaction_charges * 18) / 100) + (brokerage * 18) / 100)); //GST

  var total_charges = roundToTwo(brokerage + transaction_charges + gst);
  var pnl = parseFloat(((sell - buy) * quantity) - total_charges).toFixed(5);
 pnl = roundToTwo(pnl);
  $('#pnl_display').text(pnl);


})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="table table-borderless">
  <tbody>
    <tr style="text-align: center;">
      <td><b>Quantity</b></td>
      <td><b>Buy</b></td>
      <td><b>Sell</b></td>
    </tr>
    <tr>
      <td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
      <td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
      <td><input type="number" class="form-control" id="sell" placeholder="Sell Amount" name="sell"></td>
    </tr>

    <tr id="pnl_color">
      <td><span id="pnl_text_display">Profit / Loss</span></td>
      <td><span id="pnl_display"></span></td>
    </tr>

  </tbody>
</table>