Как мне отформатировать числа с помощью JavaScript? - PullRequest
90 голосов
/ 20 апреля 2011

Я хочу отформатировать числа с использованием JavaScript.

Например:

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

Ответы [ 17 ]

135 голосов
/ 07 мая 2015

Если вы хотите использовать встроенный код, вы можете использовать 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.

33 голосов
/ 02 сентября 2015

Краткое решение:

var n = 1234567890;
String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')
// "1,234,567,890"
30 голосов
/ 20 апреля 2011

Использование

num = num.toFixed(2);

Где 2 - количество десятичных знаков

Edit:

Вот функция для форматирования числа, как вы хотите

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

28 голосов
/ 12 декабря 2013

Из-за ошибок, обнаруженных JasperV - хорошие моменты!- Я переписал свой старый код.Я предполагаю, что когда-либо использовал это только для положительных значений с двумя десятичными знаками.

В зависимости от того, чего вы пытаетесь достичь, вы можете захотеть округлить или нет, поэтому здесь две версии разделены на это деление.

Сначала, с округлением.

Я ввел метод toFixed(), так как он лучше обрабатывает округление до определенных десятичных разрядов и хорошо поддерживает.Однако это замедляет процесс.

Эта версия по-прежнему отделяет десятичную дробь, но использует метод, отличный от предыдущего.Часть w|0 удаляет десятичную дробь.Для получения дополнительной информации об этом, это хороший ответ .Затем оставляется целое число, сохраняется его в k, а затем снова вычитается из исходного числа, оставляя десятичное число само по себе.

Кроме того, если мы примем во внимание отрицательные числа, нам нужноцикл while (пропуская три цифры), пока мы не нажмем 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'

Fiddlesticks

http://jsfiddle.net/XC3sS/

21 голосов
/ 18 августа 2016

В браузерах, которые поддерживают Спецификация API интернационализации ECMAScript® 2016 (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
}
6 голосов
/ 20 апреля 2011

Используйте числовую функцию 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

6 голосов
/ 20 апреля 2011

Думаю, с помощью этого jQuery-numberformatter вы сможете решить свою проблему.

Конечно, это предполагает, что у вас нет проблем с использованием jQuery в вашем проекте. Обратите внимание, что функциональность связана с событием blur .

$("#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">
4 голосов
/ 12 января 2017

function numberWithCommas(x) {
  x=String(x).toString();
  var afterPoint = '';
  if(x.indexOf('.') > 0)
     afterPoint = x.substring(x.indexOf('.'),x.length);
  x = Math.floor(x);
  x=x.toString();
  var lastThree = x.substring(x.length-3);
  var otherNumbers = x.substring(0,x.length-3);
  if(otherNumbers != '')
      lastThree = ',' + lastThree;
  return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
}

console.log(numberWithCommas(100000));
console.log(numberWithCommas(10000000));

Выход

1,00,000
1,00,00,000

3 голосов
/ 20 апреля 2011

Это статья о вашей проблеме.Добавление разделителя тысяч не встроено в JavaScript, поэтому вам придется написать свою собственную функцию, подобную этой (пример взят со связанной страницы):

function addSeperator(nStr){
  nStr += '';
  x = nStr.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;
}
2 голосов
/ 11 сентября 2017

Если вы ищете форматирование с ограничением до трех значащих цифр, например:

1,23,45,67,890.123

Использование:

number.toLocaleString('en-IN');

Рабочий пример:

let number = 1234567890.123; 

document.write(number.toLocaleString('en-IN'));

Проверено в Chrome v60.0.3112.113

Источник: Number.prototype.toLocaleString () |MDN

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...