如何使用JavaScript格式化数字？

Question

我想用JavaScript格式化数字.

例如:

10     => 10.00
100    => 100.00
1000   => 1,000.00
10000  => 10,000.00
100000 => 100,000.00

Answer 1

如果您想使用内置的代码,你可以使用toLocaleString()与minimumFractionDigits,虽然在扩展选项浏览器的兼容性toLocaleString() 是有限的.

var n = 100000;
var value = n.toLocaleString(
  undefined, // leave undefined to use the browser's locale,
             // or use a string like 'en-US' to override it.
  { minimumFractionDigits: 2 }
);
console.log(value);
// In en-US, logs '100,000.00'
// In de-DE, logs '100.000,00'
// In hi-IN, logs '1,00,000.00'

如果您使用的是Node.js,则需要使用 npm install该intl软件包.

Answer 2

简短解决方案

var n = 1234567890;
String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')
// "1,234,567,890"

Answer 3

使用

num = num.toFixed(2);

其中2是小数位数

编辑:

这是根据需要格式化数字的功能

function formatNumber(number)
{
    number = number.toFixed(2) + '';
    x = number.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Sorce:www.mredkj.com

Answer 4

由于JasperV发现的错误 - 好点! - 我改写了我的旧代码.我想我只用过两个小数位的正值.

根据你想要实现的目标,你可能想要舍入或不舍入,所以这里有两个版本分开.

首先是四舍五入.

我已经介绍了这个toFixed()方法,因为它可以更好地处理到特定小数位的精确舍入并得到很好的支持.但它确实减慢了速度.

此版本仍然分离小数,但使用与以前不同的方法.该w|0部分删除小数.有关这方面的更多信息,这是一个很好的答案.然后保留剩余的整数,将其存储k,然后再从原始数字中减去它,单独留下小数.

另外,如果我们考虑负数,我们需要循环(跳过三位数)直到我们命中b.在处理负数时,这被计算为1,以避免出现类似的情况-,100.00

循环的其余部分与之前相同.

function formatThousandsWithRounding(n, dp){
  var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
      u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
      s = ''+k, i = s.length, r = '';
  while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
  return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};

在下面的代码段中,您可以编辑数字以自行测试.

function formatThousandsWithRounding(n, dp){
  var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
      u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
      s = ''+k, i = s.length, r = '';
  while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
  return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};

var dp;
var createInput = function(v){
  var inp = jQuery('<input class="input" />').val(v);
  var eql = jQuery('<span>&nbsp;=&nbsp;</span>');
  var out = jQuery('<div class="output" />').css('display', 'inline-block');
  var row = jQuery('<div class="row" />');
  row.append(inp).append(eql).append(out);
  inp.keyup(function(){
    out.text(formatThousandsWithRounding(Number(inp.val()), Number(dp.val())));
  });
  inp.keyup();
  jQuery('body').append(row);
  return inp;
};

jQuery(function(){
  var numbers = [
    0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
  ], inputs = $();
  dp = jQuery('#dp');
  for ( var i=0; i<numbers.length; i++ ) {
    inputs = inputs.add(createInput(numbers[i]));
  }
  dp.on('input change', function(){
    inputs.keyup();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />

现在是另一个版本,没有四舍五入.

这采用不同的路线并试图避免数学计算(因为这可能引入舍入或舍入误差).如果你不想舍入,那么你只是将事物作为一个字符串来处理,即转换为两位小数的1000.999只会是1000.99而不是1001.00.

这种方法避免了使用.split(),RegExp()但是,两者都比较慢.虽然我从迈克尔的答案中学到了一些新东西toLocaleString,但我也很惊讶地发现它是 - 从某种程度上说 - 是最慢的方法(至少在Firefox和Chrome中; Mac OSX).

使用lastIndexOf()我们找到可能存在的小数点,从那里一切都差不多.在需要的地方保存带有额外0的填充.此代码限制为5位小数.在我的测试中,这是更快的方法.

var formatThousandsNoRounding = function(n, dp){
  var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
      i = s.lastIndexOf('.'), j = i == -1 ? l : i,
      r = e, d = s.substr(j+1, dp);
  while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
  return s.substr(0, j + 3) + r + 
    (dp ? '.' + d + ( d.length < dp ? 
        ('00000').substr(0, dp - d.length):e):e);
};

var formatThousandsNoRounding = function(n, dp){
  var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
      i = s.lastIndexOf('.'), j = i == -1 ? l : i,
      r = e, d = s.substr(j+1, dp);
  while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
  return s.substr(0, j + 3) + r + 
  	(dp ? '.' + d + ( d.length < dp ? 
    	('00000').substr(0, dp - d.length):e):e);
};

var dp;
var createInput = function(v){
  var inp = jQuery('<input class="input" />').val(v);
  var eql = jQuery('<span>&nbsp;=&nbsp;</span>');
  var out = jQuery('<div class="output" />').css('display', 'inline-block');
  var row = jQuery('<div class="row" />');
  row.append(inp).append(eql).append(out);
  inp.keyup(function(){
    out.text(formatThousandsNoRounding(Number(inp.val()), Number(dp.val())));
  });
  inp.keyup();
  jQuery('body').append(row);
  return inp;
};

jQuery(function(){
  var numbers = [
    0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
  ], inputs = $();
  dp = jQuery('#dp');
  for ( var i=0; i<numbers.length; i++ ) {
    inputs = inputs.add(createInput(numbers[i]));
  }
  dp.on('input change', function(){
    inputs.keyup();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />

我将很快更新一个页内代码片段演示,但现在这里有一个小提琴:

https://jsfiddle.net/bv2ort0a/2/

旧方法

为什么要使用RegExp呢？ - 当牙签使用时不要使用锤子,即使用字符串操作:

var formatThousands = function(n, dp){
  var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
  while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
  return s.substr(0, i + 3) + r + 
    (d ? '.' + Math.round(d * Math.pow(10, dp || 2)) : '');
};

走过去

formatThousands( 1000000.42 );

首先剥离小数:

s = '1000000', d = ~ 0.42

从字符串末尾开始向后工作:

',' + '000'
',' + '000' + ',000'

通过添加剩余前缀和十进制后缀(使用舍入到dp小数点)来完成:

'1' + ',000,000' + '.42'

木竿

http://jsfiddle.net/XC3sS/

Answer 5

在支持ECMAScript®2016国际化API规范(ECMA-402)的浏览器上,您可以使用Intl.NumberFormat实例:

var nf = Intl.NumberFormat();
var x = 42000000;
console.log(nf.format(x)); // 42,000,000 in many locales
                           // 42.000.000 in many other locales

if (typeof Intl === "undefined" || !Intl.NumberFormat) {
  console.log("This browser doesn't support Intl.NumberFormat");
} else {
  var nf = Intl.NumberFormat();
  var x = 42000000;
  console.log(nf.format(x)); // 42,000,000 in many locales
                             // 42.000.000 in many other locales
}

Answer 6

您可能需要考虑使用toLocaleString()

工作示例：

const number = 1234567890.123;

console.log(number.toLocaleString('en-US')); // US format

console.log(number.toLocaleString('en-IN')); // Indian format

在 Chrome v60 和 v88 中测试

来源：Number.prototype.toLocaleString() | MDN

Answer 7

使用数字功能toFixed和此功能添加逗号。

function addCommas(nStr)
{
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
n = 10000;
r = n.toFixed(2); //10000.00

addCommas(r); // 10,000.00

http://www.mredkj.com/javascript/numberFormat.html

Answer 8

我认为使用这个jQuery-numberformatter你可以解决你的问题.

当然,这假设您在项目中使用jQuery没有问题.请注意,该功能与模糊事件有关.

$("#salary").blur(function(){
      $(this).parseNumber({format:"#,###.00", locale:"us"});
      $(this).formatNumber({format:"#,###.00", locale:"us"});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/timdown/jshashtable/hashtable.js"></script>

<script src="https://cdn.jsdelivr.net/gh/hardhub/jquery-numberformatter/src/jquery.numberformatter.js"></script>

<input type="text" id="salary">

Answer 9

 function formatNumber1(number) {
  var comma = ',',
      string = Math.max(0, number).toFixed(0),
      length = string.length,
      end = /^\d{4,}$/.test(string) ? length % 3 : 0;
  return (end ? string.slice(0, end) + comma : '') + string.slice(end).replace(/(\d{3})(?=\d)/g, '$1' + comma);
 }

 function formatNumber2(number) {
  return Math.max(0, number).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',');
 }

来源： http: //jsperf.com/number-format