How to multiply in Javascript? problems with decim

2020-02-18 21:13发布

站内问答 / JavaScript
1197 13 5

i've the following code in Javascript:

var m1 = 2232.00;
var percent = (10/100);
var total = percent*m1;
alert(total);

The problem is that the variable "total" gives me "223.20000000000002" and it should be "223.2", what should i do to get the correct value?

13条回答
仙女界的扛把子
2楼-- · 2020-02-18 21:17

total.toFixed(2) may help. But note that the total variable be will typecasted into a string.

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
3楼-- · 2020-02-18 21:18

This can be done well with an external library called decimal.js that provides a Decimal type for JavaScript. It's also available for Node on npm. Below is an example that replicates the original example from gustavomanolo using decimal.js.

// Decimal type provided by decimal.js (http://mikemcl.github.io/decimal.js/)
var m1 = new Decimal( 2232.00 );
var percent = new Decimal( 10/100 );
var total = m1.mul(percent);
console.log( 'Total:', total );
<script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/7.2.3/decimal.min.js"></script>

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
4楼-- · 2020-02-18 21:19

If you are trying to display this number, you could convert to a string with toFixed(1). If you do this, keep track of the types because you can't then multiply the string with another number.

If you are going to use it in another computation you could truncate it to one decimal place:

Math.round( total * 10 ) / 10

However, as pointed out by various people, the inexact value is just the way floating point numbers are.

See the questions linked in the comments for more good information.

查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
5楼-- · 2020-02-18 21:20

I found a very simple solution. The * operator is a bit broken when it comes to decimal numbers, but the / operator is not. A multiplication can be easily transformed into a division since a • b = a / (1/b)

function times(a, b) { return a/(1/b) }

Just replace percent * m1 with times(percent, m1).

Update: It doesn't work all the times.

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
6楼-- · 2020-02-18 21:25

The operator "*" and "/" do not work perfectly always, for example:

32.09 * 100 = 3209.0000000000005
100 / (1 / 32.09) = 3209.0000000000005

Solution:

One solution, the easy one, to have decimals is useing .toFixed(2) where "2" is the number of decimal digits that you want. But you have to take into account this return you a String, and it rounds the value.

45.6789.toFixed(2) —> "45.68" as String

Other option, the most complete, is using .toLocaleString that converts the number properly to the country code that you want. You can set a pair of params to fix the decimals values always to 2. This also returns you a String:

(654.3453).toLocaleString(
  'en-US',
  {minimumFractionDigits: 2, maximumFractionDigits: 2},
) —> "654.35" as String

If you need it as a Number, you can wrap it into Number( ... ) :

Number((654.3453).toLocaleString(
  'en-US',
  {minimumFractionDigits: 2, maximumFractionDigits: 2},
)) —> 654.35 as Number

If you only want a no decimal number, use one of this methods to be sure that the result is without decimals.

Math.trunc(32.09); —> 32 as Number  
(32.09).toFixed(0); —> “32” as String
32.09 | 0; —> 32 as Number
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
7楼-- · 2020-02-18 21:25

If you are using Angular, I made a component for this.

Install with bower

bower install angular-floating-point --save

Usage

var pretty = floatingPoint.makePretty(6.1*6);

Here is a demo -> https://mattspaulding.github.io/angular-floating-point
Here is source -> https://github.com/mattspaulding/angular-floating-point

Try it yourself with this snippet below.

 angular.module('myApp', ['floatingPoint'])
  .controller('myCtrl', function ($scope, floatingPoint) {

      $scope.calculate = function () {
        $scope.result =$scope.num0*$scope.num1;
        $scope.prettyResult=floatingPoint.makePretty($scope.result)
      }

      $scope.num0=6.1;
      $scope.num1=6;
      $scope.calculate();

    });
 
<html>

<head>
  <title>My Angular App</title>
  <script src='//code.jquery.com/jquery-latest.min.js'></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://rawgit.com/mattspaulding/angular-floating-point/master/dist/angular-floating-point.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="row" style="padding-top: 10px;text-align:center">
      <label>(try me) ==> </label>
      <input ng-model="num0" ng-change="calculate()" style="width:100px; height:30px">
      X
      <input ng-model="num1" ng-change="calculate()" style="width:100px; height:30px">
    </div>
    <div class="row" style="padding-top: 50px;">
      <div class="col-xs-6">
        <label style="float: right;">Ugly calculation:</label>
      </div>
      <div class="col-xs-6">
        <label style="float: left;">{{result}}</label>
      </div>
    </div>
    <div class="row" style="padding-top: 20px;">
      <div class="col-xs-6">
        <label style="float: right;"><span style="color:blue">Angular Floating Point</span> calculation:</label>
      </div>
      <div class="col-xs-6">
        <label style="float: left;">{{prettyResult}}</label>
      </div>
    </div>

</body>

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)