Как напечатать число с запятыми в качестве разделителей тысяч в JavaScript

Question

Я пытаюсь напечатать целое число в JavaScript с запятыми в качестве разделителей тысяч. Например, я хочу показать число 1234567 как «1,234,567». Как бы я поступил так?

Вот как я это делаю:

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}

Есть ли более простой или элегантный способ сделать это? Было бы хорошо, если бы он работал и с поплавками, но это не обязательно. Он не должен зависеть от локали, чтобы выбирать между точками и запятыми.

Answer 1

Number.prototype.toLocaleString() было бы замечательно, если бы он был изначально предоставлен всеми браузерами (Safari) .

Я проверил все остальные ответы, но, похоже, никто не заполнил его. Вот пример того, что на самом деле является комбинацией первых двух ответов; если toLocaleString работает, он использует его, если не работает, использует пользовательскую функцию.

var putThousandsSeparators;

putThousandsSeparators = function(value, sep) {
  if (sep == null) {
    sep = ',';
  }
  // check if it needs formatting
  if (value.toString() === value.toLocaleString()) {
    // split decimals
    var parts = value.toString().split('.')
    // format whole numbers
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, sep);
    // put them back together
    value = parts[1] ? parts.join('.') : parts[0];
  } else {
    value = value.toLocaleString();
  }
  return value;
};

alert(putThousandsSeparators(1234567.890));

Answer 2

Разделитель тысяч может быть вставлен в дружественном для международного сообщества виде с помощью объекта Intl браузера:

Intl.NumberFormat().format(1234);
// returns "1,234" if the user's locale is en_US, for example

См. статью MDN о NumberFormat , чтобы узнать больше, вы можете указать поведение локали или значение по умолчанию для пользователя. Это немного более надежно, потому что учитывает местные различия; во многих странах для разделения цифр используются точки, а запятая обозначает десятичные дроби.

Intl.NumberFormat доступен не во всех браузерах, но работает в последних версиях Chrome, Opera и IE. Следующий релиз Firefox должен его поддерживать. У Webkit, похоже, нет графика реализации.

Answer 3

Вы можете использовать эту процедуру для форматирования нужной вам валюты.

var nf = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
nf.format(123456.789); // ‘$123,456.79’

Для получения дополнительной информации вы можете получить доступ по этой ссылке.

https://www.justinmccandless.com/post/formatting-currency-in-javascript/

Answer 4

если вы имеете дело со значениями в валюте и много форматируете, возможно, стоит добавить крошечный accounting.js , который обрабатывает множество крайних случаев и локализацию:

// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00

// European formatting (custom symbol and separators), could also use options object as second param:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99

// Negative values are formatted nicely, too:
accounting.formatMoney(-500000, "£ ", 0); // £ -500,000

// Simple `format` string allows control of symbol position [%v = value, %s = symbol]:
accounting.formatMoney(5318008, { symbol: "GBP",  format: "%v %s" }); // 5,318,008.00 GBP

Answer 5

Следующий код использует сканирование символов, поэтому здесь нет регулярных выражений.

function commafy( num){
  var parts = (''+(num<0?-num:num)).split("."), s=parts[0], L, i=L= s.length, o='';
  while(i--){ o = (i===0?'':((L-i)%3?'':',')) 
                  +s.charAt(i) +o }
  return (num<0?'-':'') + o + (parts[1] ? '.' + parts[1] : ''); 
}

Показывает многообещающие показатели: http://jsperf.com/number-formatting-with-commas/5

2015.4.26: Незначительное исправление для решения проблемы, когда число <0. Смотри <a href="https://jsfiddle.net/runsun/p5tqqvs3/" rel="noreferrer">https://jsfiddle.net/runsun/p5tqqvs3/

Answer 6

Вот простая функция, которая вставляет запятые для тысяч разделителей. Он использует функции массива, а не RegEx.

/**
 * Format a number as a string with commas separating the thousands.
 * @param num - The number to be formatted (e.g. 10000)
 * @return A string representing the formatted number (e.g. "10,000")
 */
var formatNumber = function(num) {
    var array = num.toString().split('');
    var index = -3;
    while (array.length + index > 0) {
        array.splice(index, 0, ',');
        // Decrement by 4 since we just added another unit to the array.
        index -= 4;
    }
    return array.join('');
};

Ссылка CodeSandbox с примерами: https://codesandbox.io/s/p38k63w0vq

Answer 7

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

$(function(){
  
  function insertCommas(s) {

    // get stuff before the dot
    var d = s.indexOf('.');
    var s2 = d === -1 ? s : s.slice(0, d);

    // insert commas every 3 digits from the right
    for (var i = s2.length - 3; i > 0; i -= 3)
      s2 = s2.slice(0, i) + ',' + s2.slice(i);

    // append fractional part
    if (d !== -1)
      s2 += s.slice(d);

    return s2;

  }
  
  
  $('#theDudeAbides').text( insertCommas('1234567.89012' ) );
  
  
});

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

<div id="theDudeAbides"></div>

Answer 8

Для меня лучший ответ - использовать toLocaleString, как говорили некоторые участники. Если вы хотите включить символ '$', просто добавьте язык и введите параметры. Вот и пример для форматирования числа в мексиканские песо

var n = 1234567.22
alert(n.toLocaleString("es-MX",{style:"currency", currency:"MXN"}))

Ярлык

1234567.22.toLocaleString("es-MX",{style:"currency", currency:"MXN"})

Answer 9

Используйте этот код для обработки формата валюты для Индии. Код страны можно изменить для обработки другой валюты страны.

let amount =350256.95
var formatter = new Intl.NumberFormat('en-IN', {
  minimumFractionDigits: 2,
});

// Use it.

formatter.format(amount);

выход:

3,50,256.95

Answer 10

Позвольте мне попытаться улучшить uKolka 's answer и, возможно, помочь другим сэкономить время.

Использовать Numeral.js .

document.body.textContent = numeral(1234567).format('0,0');

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

Вы должны использовать Number.prototype.toLocaleString () , только если его совместимость с браузером не является проблемой.