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

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

1445 голосов
/ 25 мая 2010

Я пытаюсь напечатать целое число в 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;
}

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

Ответы [ 44 ]

0 голосов
/ 21 февраля 2017

Теперь это должно работать ... отредактировано для добавления десятичных разрядов, если число является десятичным. 

<script>
  function makedollars(mynumber)
      {
       mynumber = mynumber.toString();
    var numberend="";

  if(mynumber.split('.').length>1){
       var mynumbersplit = mynumber.split('.');
     mynumber = mynumbersplit[0];
   numberend= mynumbersplit[1];

  }

      var  mn = mynumber.length;

      if (mn <= 3) { return mynumber + numberend; }
      var grps = [];

        while (mn > 3)
        {  
            grps.push(mynumber.substring(mn,mn - 3));
            mn = mn - 3;
        }
        grps.push(mynumber.substring(mn,mn - 3));
      grps.reverse();

        grps.join(",");
        if(numberend!=""){ grps =  grps +"."+numberend;}

        return grps; 
              }


 </script>
0 голосов
/ 23 ноября 2012

Для целых чисел я использовал очень простой метод: 

var myNumber = 99999,
    myString = myNumber + "";

myString.length > 3 ? return myString.substring(0, myString.length - 3) + "," + 
    myString.substring(myString.length - 3) : return myString;
0 голосов
/ 28 июня 2017

Вот моя попытка:

РЕДАКТИРОВАТЬ: Добавлено в десятичных числах 

function splitMille(n, separator = ',') {
  // Cast to string
  let num = (n + '')

  // Test for and get any decimals (the later operations won't support them)
  let decimals = ''
  if (/\./.test(num)) {
    // This regex grabs the decimal point as well as the decimal numbers
    decimals = num.replace(/^.*(\..*)$/, '$1')
  }
  
  // Remove decimals from the number string
  num = num.replace(decimals, '')
    // Reverse the number string through Array functions
    .split('').reverse().join('')
    // Split into groups of 1-3 characters (with optional supported character "-" for negative numbers)
    .match(/[0-9]{1,3}-?/g)
    // Add in the mille separator character and reverse back
    .join(separator).split('').reverse().join('')

  // Put the decimals back and output the formatted number
  return `${num}${decimals}`
}

let testA = splitMille(1234)
let testB = splitMille(-1234)
let testC = splitMille(123456.789)
let testD = splitMille(9007199254740991)
let testE = splitMille(1000.0001)

console.log('Results!\n\tA: %s\n\tB: %s\n\tC: %s\n\tD: %s\n\tE: %s', testA, testB, testC, testD, testE)
0 голосов
/ 28 марта 2016

Я думал, что поделюсь небольшим трюком, который я использую для форматирования большого числа.Вместо того, чтобы вставлять запятые или пробелы, я вставляю пустой, но видимый интервал между «тысячами».Это делает тысячи легко видимыми, но позволяет копировать / вставлять ввод в исходном формате, без запятых / пробелов. 

// This function accepts an integer, and produces a piece of HTML that shows it nicely with 
// some empty space at "thousand" markers. 
// Note, these space are not spaces, if you copy paste, they will not be visible.
function valPrettyPrint(orgVal) {
  // Save after-comma text, if present
  var period = orgVal.indexOf(".");
  var frac = period >= 0 ? orgVal.substr(period) : "";
  // Work on input as an integer
  var val = "" + Math.trunc(orgVal);
  var res = "";
  while (val.length > 0) {
    res = val.substr(Math.max(0, val.length - 3), 3) + res;
    val = val.substr(0, val.length - 3);
    if (val.length > 0) {
        res = "<span class='thousandsSeparator'></span>" + res;
    }
  }
  // Add the saved after-period information
  res += frac;
  return res;
}

С этим CSS: 

.thousandsSeparator {
  display : inline;
  padding-left : 4px;
}

См. Пример JSFiddle.

Страница:
...