Как форматировать номера с помощью JavaScript?

Я хочу форматировать числа с помощью JavaScript.

Например:

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

Ответ 1

Если вы хотите использовать встроенный код, вы можете использовать toLocaleString() с minimumFractionDigits, хотя совместимость браузера для расширенных опций на toLocaleString() ограничена.

var n = 100000;
var value = n.toLocaleString(
  undefined, // leave undefined to use the browser 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'

Ответ 2

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

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

Ответ 3

Используйте

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;
}

Сорс: www.mredkj.com

Ответ 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?" />

Ответ 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
}

Ответ 6

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

Ответ 7

Я думаю, с помощью этого 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">

Ответ 8

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));

Ответ 9

Это - статья о вашей проблеме. Добавление тысячи-seperator не встроено в 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;
}

Ответ 10

Или вы могли бы использовать библиотеку sugar.js, а format:

format (place = 0, thousand = ',', decimal = '.') Форматирует номер для читаемой строки. Если место undefined, будет автоматически определить место. тысячи - это символ, используемый для тысяч разделитель. decimal - символ, используемый для десятичной точки.

Примеры:

(56782).format() > "56,782"
(56782).format(2) > "56,782.00"
(4388.43).format(2, ' ') > "4 388.43"
(4388.43).format(3, '.', ',') > "4.388,430"

Ответ 11

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

1,23,45,67,890.123

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

number.toLocaleString('en-IN');

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

let number = 1234567890.123; 

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

Ответ 12

Это даст вам ваши разделенные запятой значения, а также добавит фиксированную нотацию в конец.

    nStr="1000";
    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');
    }
    commaSeperated = x1 + x2 + ".00";
    alert(commaSeperated);

Источник

Ответ 13

Позвольте мне также бросить мое решение здесь. Я прокомментировал каждую строку для удобства чтения, а также привел несколько примеров, поэтому может показаться большим.

function format(number) {

    var decimalSeparator = ".";
    var thousandSeparator = ",";

    // make sure we have a string
    var result = String(number);

    // split the number in the integer and decimals, if any
    var parts = result.split(decimalSeparator);

    // if we don't have decimals, add .00
    if (!parts[1]) {
      parts[1] = "00";
    }
  
    // reverse the string (1719 becomes 9171)
    result = parts[0].split("").reverse().join("");

    // add thousand separator each 3 characters, except at the end of the string
    result = result.replace(/(\d{3}(?!$))/g, "$1" + thousandSeparator);

    // reverse back the integer and replace the original integer
    parts[0] = result.split("").reverse().join("");

    // recombine integer with decimals
    return parts.join(decimalSeparator);
}

document.write("10 => " + format(10) + "<br/>");
document.write("100 => " + format(100) + "<br/>");
document.write("1000 => " + format(1000) + "<br/>");
document.write("10000 => " + format(10000) + "<br/>");
document.write("100000 => " + format(100000) + "<br/>");
document.write("100000.22 => " + format(100000.22) + "<br/>");

Ответ 14

 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

Ответ 15

Если вы используете jQuery, вы можете использовать format или числовой формат.

Ответ 16

Это примерно в 3 раза более быстрый вариант принятого ответа. Он не создает массив и избегает создания объектов и конкатенации строк для целых чисел в конце. Это может быть полезно, если вы переносите множество значений, например. в таблице.

function addThousandSeparators(number) {
    var whole, fraction
    var decIndex = number.lastIndexOf('.')
    if (decIndex > 0) {
        whole = number.substr(0, decIndex)
        fraction = number.substr(decIndex)
    } else {
        whole = number
    }
    var rgx = /(\d+)(\d{3})/
    while (rgx.test(whole)) {
        whole = whole.replace(rgx, '$1' + ',' + '$2')
    }
    return fraction ? whole + fraction : whole
}

Ответ 17

                function formatThousands(n,dp,f) {
                    // dp - decimal places
                    // f - format >> 'us', 'eu'
                    if (n == 0) {
                        if(f == 'eu') {
                            return "0," + "0".repeat(dp);   
                        }
                        return "0." + "0".repeat(dp);
                    }

                    /* round to 2 decimal places */
                    //n = Math.round( n * 100 ) / 100;
                    var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
                    while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
                    var a = s.substr(0, i + 3) + r + (d ? '.' + Math.round((d+1) * Math.pow(10,dp)).toString().substr(1,dp) : '');
                    /* change format from 20,000.00 to 20.000,00 */
                    if (f == 'eu') {
                        var b = a.toString().replace(".", "#");
                        b = b.replace(",", ".");
                        return b.replace("#", ",");
                    }                   
                    return a;
                }