【问题标题】:Angularjs avoid scientific notation for number filterAngularjs避免数字过滤器的科学记数法
【发布时间】:2023-12-04 04:03:01
【问题描述】:

我需要为我的应用打印非常小的数字。我更喜欢它们都以十进制格式显示。有没有办法使用 angularjs 数字过滤器来做到这一点,还是我必须自己编写或以某种方式修改现有的?

http://jsfiddle.net/ADukg/2386/

Javascript

var myApp = angular.module('myApp',[]);

 function MyCtrl($scope) {
   $scope.MyNum1 = 0.000001;
   $scope.MyNum2 = 0.0000001;
 }

HTML

<div ng-controller="MyCtrl">
  Small Number: {{MyNum1 | number:8}}<br/>
  Very Small Number: {{MyNum2 | number:8}}
</div>

输出不一致

Small Number: 0.00000100
Very Small Number: 1e-7

【问题讨论】:

    标签: javascript html angularjs scientific-notation


    【解决方案1】:

    我还没有完全测试过这个,我不确定如何让它在 jsfiddle 上工作,但这似乎暂时有效。

    Javascript

    var app = angular.module('myApp', []);
    
    app.filter('decimalFormat', function () {
      return function (text) {
        return parseFloat(text).toFixed(20).replace(/0+$/,'');
      };
    });
    

    HTML

    <div ng-controller="MyCtrl">
      Small Number: {{MyNum1 | number:8 | decimalFormat}}<br/>
      Very Small Number: {{MyNum2 | number:8 | decimalFormat}}
    </div>
    

    在兰登的评论后编辑,添加逗号:

    Javascript

    var app = angular.module('myApp', []);
    
    app.filter('decimal', function () {
      return function (text) {
          var parts = parseFloat(text).toFixed(8).split('.');
          parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
          return parts.join('.');
        }
      };
    });
    
    function MyCtrl($scope) {
      $scope.MyNum1 = 0.12345678912;
      $scope.MyNum2 = 0.000000100001;
      $scope.MyNum3 = 0;
      $scope.MyNum3 = 1123123.05;
    }
    

    HTML

    <div ng-controller="MyCtrl">
      Small Number: {{MyNum1 | decimal}}<br/>
      Very Small Number: {{MyNum2 | decimal}}<br/>
      Zero: {{MyNum3 | decimal}}<br/>
      Million: {{MyNum4 | decimal}}<br/>
    </div>
    

    【讨论】:

    • 是的,这是正确的,除了您不再需要 number:8 过滤器并且您应该将“decimalFormat”简化为“decimal”。你唯一失去的(Angular 的数字过滤器为你做的)是 i18n。 jsfiddle.net/fH9bM
    • 您的编辑版本在过滤器函数中引入了一个额外的右大括号,但对其进行的编辑过于琐碎,无法允许。我还在从这里复制的我自己的版本中添加了一个用于toFixed() 调用的位置数的参数,但我认为这可能会改变你的函数的意图太多,无法在此处建议作为编辑。
    【解决方案2】:

    您将不得不自己编写,因为源中的现有过滤器无法处理大的小数位(请参阅filters.js 中的formatNumber)。最终的问题是调用toString 以在您的HTML 中显示数字。更理想的是,可以调用 toFixed,但这会变得很棘手,因为您必须计算出小数的长度。

    console.log(0.000001);
     > 0.000001
    console.log(0.0000001);
     > 1e-7
    console.log(0.0000001.toFixed(20));
     > 0.00000010000000000000
    

    这里有一个快速的技巧:

    console.log(0.0000001.toFixed(20).replace(/0+$/, ''));
     > 0.0000001
    

    所以您的自定义过滤器就这么简单。不过,我建议在 GitHub 上提交问题。

    【讨论】:

      【解决方案3】:

      这是为了将数字作为十进制字符串返回,但它也适用于小数字-

      Number.prototype.noExponents= function(){
          var data= String(this).split(/[eE]/);
          if(data.length== 1) return data[0]; 
      
          var  z= '', sign= this<0? '-':'',
          str= data[0].replace('.', ''),
          mag= Number(data[1])+ 1;
      
          if(mag<0){
              z= sign + '0.';
              while(mag++) z += '0';
              return z + str.replace(/^\-/,'');
          }
          mag -= str.length;  
          while(mag--) z += '0';
          return str + z;
      }
      
      var n=1e-7;
      n.noExponents();
      returned value: (String) '0.0000001';
      

      【讨论】:

      • 您是否同时更新了此功能?还是你还在用这个?
      最近更新 更多