Próbuję wydrukować liczbę całkowitą w JavaScript z przecinkami jako tysiące separatorów. Na przykład chcę pokazać liczbę 1234567 jako „1 234 567”. Jak miałbym to zrobić?

Oto jak to robię:

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

Czy istnieje prostszy lub bardziej elegancki sposób na zrobienie tego? Byłoby miło, gdyby działał również z pływakami, ale nie jest to konieczne. Aby wybierać między kropkami a przecinkami, nie musi być zależny od ustawień regionalnych.

Wykorzystałem pomysł z odpowiedzi Kerry, ale uprościłem go, ponieważ szukałem czegoś prostego do mojego konkretnego celu. Oto co zrobiłem:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0,        "0");
failures += !test(100,      "100");
failures += !test(1000,     "1,000");
failures += !test(10000,    "10,000");
failures += !test(100000,   "100,000");
failures += !test(1000000,  "1,000,000");
failures += !test(10000000, "10,000,000");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

Wyrażenie regularne używa 2 asercji:

• dodatni, aby wyszukać dowolny punkt w ciągu, który ma wielokrotność 3 cyfr w rzędzie po nim,
• twierdzenie negatywne, aby upewnić się, że punkt ma tylko wielokrotność 3 cyfr. Wyrażenie zastępujące umieszcza tam przecinek.

Na przykład, jeśli go zdasz 123456789.01, asercja dodatnia będzie pasować do każdego miejsca po lewej stronie 7 (ponieważ 789jest wielokrotnością 3 cyfr, 678jest wielokrotnością 3 cyfr 567itp.). Twierdzenie negatywne sprawdza, czy wielokrotność 3 cyfr nie ma po nim żadnych cyfr. 789ma kropkę po nim, więc jest dokładnie wielokrotnością 3 cyfr, więc przecinek tam. 678jest wielokrotnością 3 cyfr, ale ma 9po nim, więc te 3 cyfry są częścią grupy 4, a przecinek tam nie występuje. Podobnie dla 567. 456789ma 6 cyfr, co jest wielokrotnością 3, więc przecinek poprzedza. 345678jest wielokrotnością 3, ale ma 9po nim, więc nie ma tam przecinka. I tak dalej. The\B powstrzymuje wyrażenie regularne przed wstawieniem przecinka na początku łańcucha.

@ neu-rah wspomniał, że ta funkcja dodaje przecinki w niepożądanych miejscach, jeśli po przecinku są więcej niż 3 cyfry. Jeśli jest to problem, możesz użyć tej funkcji:

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0              , "0");
failures += !test(0.123456       , "0.123456");
failures += !test(100            , "100");
failures += !test(100.123456     , "100.123456");
failures += !test(1000           , "1,000");
failures += !test(1000.123456    , "1,000.123456");
failures += !test(10000          , "10,000");
failures += !test(10000.123456   , "10,000.123456");
failures += !test(100000         , "100,000");
failures += !test(100000.123456  , "100,000.123456");
failures += !test(1000000        , "1,000,000");
failures += !test(1000000.123456 , "1,000,000.123456");
failures += !test(10000000       , "10,000,000");
failures += !test(10000000.123456, "10,000,000.123456");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

@ tjcrowder zwrócił uwagę, że teraz, gdy JavaScript ma lookbehind ( informacje o pomocy technicznej ), można go rozwiązać w samym wyrażeniu regularnym:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0,               "0");
failures += !test(0.123456,        "0.123456");
failures += !test(100,             "100");
failures += !test(100.123456,      "100.123456");
failures += !test(1000,            "1,000");
failures += !test(1000.123456,     "1,000.123456");
failures += !test(10000,           "10,000");
failures += !test(10000.123456,    "10,000.123456");
failures += !test(100000,          "100,000");
failures += !test(100000.123456,   "100,000.123456");
failures += !test(1000000,         "1,000,000");
failures += !test(1000000.123456,  "1,000,000.123456");
failures += !test(10000000,        "10,000,000");
failures += !test(10000000.123456, "10,000,000.123456");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

(?<!\.\d*)jest negatywnym wyglądem, który mówi, że dopasowanie nie może być poprzedzone .przez zero lub więcej cyfr. Negatywne spojrzenie jest szybsze niż rozwiązanie spliti join( porównanie ), przynajmniej w V8.

Dziwi mnie, że nikt nie wspominał o Number.prototype.toLocaleString . Jest zaimplementowany w JavaScript 1.5 (który został wprowadzony w 1999 roku), więc jest zasadniczo obsługiwany we wszystkich głównych przeglądarkach.

var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

Działa również w Node.js od v0.12 poprzez włączenie Intl

Zwróć uwagę, że ta funkcja zwraca ciąg, a nie liczbę.

Jeśli chcesz czegoś innego, Numeral.js może być interesujący.

var number = 1234567890; // Example number to be converted

⚠ umysł że JavaScript ma maksymalną całkowitą wartość 9007199254740991

toLocaleString :

number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"

NumberFormat ( Safari nie jest obsługiwane):

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

Z tego, co sprawdziłem (przynajmniej Firefox), oba są mniej więcej takie same pod względem wydajności.

Sugeruję użycie phpjs.org ' number_format ()

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

AKTUALIZACJA 02/13/14

Ludzie zgłaszali, że to nie działa zgodnie z oczekiwaniami, więc zrobiłem JS Fiddle, który zawiera automatyczne testy.

Aktualizacja 26.11.2017

Oto skrzypce jako fragment kodu z nieznacznie zmodyfikowanymi danymi wyjściowymi:

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

var exampleNumber = 1;
function test(expected, number, decimals, dec_point, thousands_sep)
{
    var actual = number_format(number, decimals, dec_point, thousands_sep);
    console.log(
        'Test case ' + exampleNumber + ': ' +
        '(decimals: ' + (typeof decimals === 'undefined' ? '(default)' : decimals) +
        ', dec_point: "' + (typeof dec_point === 'undefined' ? '(default)' : dec_point) + '"' +
        ', thousands_sep: "' + (typeof thousands_sep === 'undefined' ? '(default)' : thousands_sep) + '")'
    );
    console.log('  => ' + (actual === expected ? 'Passed' : 'FAILED') + ', got "' + actual + '", expected "' + expected + '".');
    exampleNumber++;
}

test('1,235',    1234.56);
test('1 234,56', 1234.56, 2, ',', ' ');
test('1234.57',  1234.5678, 2, '.', '');
test('67,00',    67, 2, ',', '.');
test('1,000',    1000);
test('67.31',    67.311, 2);
test('1,000.6',  1000.55, 1);
test('67.000,00000', 67000, 5, ',', '.');
test('1',        0.9, 0);
test('1.20',     '1.20', 2);
test('1.2000',   '1.20', 4);
test('1.200',    '1.2000', 3);

.as-console-wrapper {
  max-height: 100% !important;
}

Jest to odmiana odpowiedzi @ mikez302, ale zmodyfikowana w celu obsługi liczb dziesiętnych (według opinii @ neu-rah, że liczbaWithCommas (12345.6789) -> „12 345,6,789” zamiast „12 345 6789”

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

print(formatNumber(2665));      // 2,665
print(formatNumber(102665));    // 102,665
print(formatNumber(111102665)); // 111,102,665

Używanie wyrażenia regularnego

function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(toCommas(123456789)); // 123,456,789

console.log(toCommas(1234567890)); // 1,234,567,890
console.log(toCommas(1234)); // 1,234

Korzystanie z toLocaleString ()

var number = 123456.789;

// request a currency format
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥123,457

// limit to three significant digits
console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
// → 1,23,000

ref MDN: Number.prototype.toLocaleString ()

Korzystanie z Intl.NumberFormat ()

var number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "￥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));

// expected output: "1,23,000"

ref Intl.NumberFormat

DEMO W TUTAJ

<script type="text/javascript">
  // Using Regular expression
  function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  function commas() {
    var num1 = document.myform.number1.value;

    // Using Regular expression
    document.getElementById('result1').value = toCommas(parseInt(num1));
    // Using toLocaleString()

    document.getElementById('result2').value = parseInt(num1).toLocaleString('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    });

    // Using Intl.NumberFormat()
    document.getElementById('result3').value = new Intl.NumberFormat('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    }).format(num1);
  }
</script>
<FORM NAME="myform">
  <INPUT TYPE="text" NAME="number1" VALUE="123456789">
  <br>
  <INPUT TYPE="button" NAME="button" Value="=>" onClick="commas()">
  <br>Using Regular expression
  <br>
  <INPUT TYPE="text" ID="result1" NAME="result1" VALUE="">
  <br>Using toLocaleString()
  <br>
  <INPUT TYPE="text" ID="result2" NAME="result2" VALUE="">
  <br>Using Intl.NumberFormat()
  <br>
  <INPUT TYPE="text" ID="result3" NAME="result3" VALUE="">

</FORM>

Wydajność

http://jsben.ch/sifRd

Intl.NumberFormat

Natywna funkcja JS. Obsługiwane przez IE11, Edge, najnowsze Safari, Chrome, Firefox, Opera, Safari na iOS i Chrome na Androida.

var number = 3500;

console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale

Dziękujemy wszystkim za odpowiedzi. Zbudowałem niektóre z odpowiedzi, aby stworzyć bardziej „uniwersalne” rozwiązanie.

Pierwszy fragment dodaje funkcję, która naśladuje PHP „S number_format()do prototypu Number. Jeśli formatuję liczbę, zwykle chcę miejsc dziesiętnych, więc funkcja przyjmuje liczbę miejsc dziesiętnych do wyświetlenia. Niektóre kraje używają przecinków jako dziesiętnych i dziesiętnych jako separatora tysięcy, więc funkcja umożliwia ustawienie tych separatorów.

Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.toFixed(decimals).split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);

    return parts.join(dec_point);
}

Użyłbyś tego w następujący sposób:

var foo = 5000;
console.log(foo.numberFormat(2)); // us format: 5,000.00
console.log(foo.numberFormat(2, ',', '.')); // european format: 5.000,00

Odkryłem, że często potrzebowałem odzyskać liczbę dla operacji matematycznych, ale parseFloat konwertuje 5000 na 5, po prostu biorąc pierwszą sekwencję wartości całkowitych. Stworzyłem więc własną funkcję konwersji float i dodałem ją do prototypu String.

String.prototype.getFloat = function(dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.split(dec_point);
    var re = new RegExp("[" + thousands_sep + "]");
    parts[0] = parts[0].replace(re, '');

    return parseFloat(parts.join(dec_point));
}

Teraz możesz korzystać z obu funkcji w następujący sposób:

var foo = 5000;
var fooString = foo.numberFormat(2); // The string 5,000.00
var fooFloat = fooString.getFloat(); // The number 5000;

console.log((fooString.getFloat() + 1).numberFormat(2)); // The string 5,001.00

Jestem pod wrażeniem liczby odpowiedzi, jakie otrzymałem na to pytanie. Podoba mi się odpowiedź uKolka :

n.toLocaleString()

Niestety, w niektórych lokalizacjach, takich jak hiszpański, nie działa (IMHO) zgodnie z oczekiwaniami dla liczb poniżej 10 000:

Number(1000).toLocaleString('ES-es')

Daje 1000i nie 1.000.

Zobacz , dlaczego toLocaleString nie działa na liczbach mniejszych niż 10000 we wszystkich przeglądarkach, aby wiedzieć, dlaczego.

Musiałem więc użyć odpowiedzi Eliasa Zamarii, wybierając odpowiedni znak separatora tysięcy:

n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

Ten działa dobrze jako jednolinijka dla obu lokalizacji, które używają ,lub .jako separatora tysięcy, i zaczyna działać od 1000 we wszystkich przypadkach.

Number(1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

Daje 1.000w kontekście hiszpańskich ustawień regionalnych.

Jeśli chcesz mieć absolutną kontrolę nad sposobem formatowania liczby, możesz również spróbować:

let number   = 1234.567
let decimals = 2
let decpoint = '.' // Or Number(0.1).toLocaleString().substring(1, 2)
let thousand = ',' // Or Number(10000).toLocaleString().substring(2, 3)

let n = Math.abs(number).toFixed(decimals).split('.')
n[0] = n[0].split('').reverse().map((c, i, a) =>
  i > 0 && i < a.length && i % 3 == 0 ? c + thousand : c
).reverse().join('')
let final = (Math.sign(number) < 0 ? '-' : '') + n.join(decpoint)

console.log(final)

Daje 1,234.57.

Ten nie wymaga wyrażenia regularnego. Działa poprzez dostosowanie liczby do pożądanej liczby miejsc po przecinku za pomocą toFixednajpierw, a następnie podzielenie jej wokół punktu dziesiętnego, .jeśli taki istnieje. Lewa strona jest następnie przekształcana w tablicę cyfr, która jest odwrócona. Następnie separator tysięcy jest dodawany co trzy cyfry od początku, a wynik ponownie odwracany. Ostatecznym rezultatem jest połączenie dwóch części. Znak numeru wejściowego jest Math.absnajpierw usuwany, a następnie w razie potrzeby odkładany.

Nie jest to jedna linijka, ale niewiele dłużej i łatwo można ją przekształcić w funkcję. Zmienne zostały dodane dla jasności, ale można je zastąpić ich pożądanymi wartościami, jeśli są znane z góry. Możesz użyć wyrażeń, które wykorzystają toLocaleStringjako sposób na znalezienie odpowiednich znaków po przecinku i separatora tysięcy dla bieżących ustawień narodowych (pamiętaj, że wymagają one bardziej nowoczesnego Javascript).

Myślę, że to najkrótsze wyrażenie regularne, które to robi:

/\B(?=(\d{3})+\b)/g

"123456".replace(/\B(?=(\d{3})+\b)/g, ",")

Sprawdziłem to na kilku numerach i zadziałało.

Number.prototype.toLocaleString()byłby niesamowity, gdyby był dostarczany natywnie przez wszystkie przeglądarki (Safari) .

Sprawdziłem wszystkie inne odpowiedzi, ale chyba nikt ich nie wypełnił. Oto pocenie w tym kierunku, które jest właściwie kombinacją dwóch pierwszych odpowiedzi; jeśli toLocaleStringdziała, używa go, jeśli nie, używa niestandardowej funkcji.

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

Separator tysięcy można wstawić w przyjazny dla świata sposób za pomocą Intlobiektu przeglądarki :

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

Zobacz artykuł MDN na temat NumberFormat, aby dowiedzieć się więcej, możesz określić zachowanie regionalne lub domyślne dla użytkownika. Jest to nieco bardziej niezawodne, ponieważ uwzględnia lokalne różnice; wiele krajów używa kropek do oddzielania cyfr, a przecinek oznacza miejsca po przecinku.

Intl.NumberFormat nie jest jeszcze dostępny we wszystkich przeglądarkach, ale działa w najnowszych przeglądarkach Chrome, Opera i IE. Kolejne wydanie Firefoksa powinno go obsługiwać. Wydaje się, że Webkit nie ma harmonogramu wdrożenia.

Możesz użyć tej procedury do sformatowania potrzebnej waluty.

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

Aby uzyskać więcej informacji, możesz uzyskać dostęp do tego linku.

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

jeśli masz do czynienia z wartościami walutowymi i dużo formatujesz, może warto dodać malutką księgowość.js, która obsługuje wiele przypadków brzegowych i lokalizacji:

// 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

Poniższy kod wykorzystuje skanowanie znaków, więc nie ma wyrażenia regularnego.

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] : ''); 
}

Pokazuje obiecującą wydajność: http://jsperf.com/number-formatting-with-commas/5

2015.4.26: Drobna poprawka rozwiązująca problem, gdy numer <0. Zobacz https://jsfiddle.net/runsun/p5tqqvs3/

Oto prosta funkcja, która wstawia przecinki dla tysięcy separatorów. Używa funkcji tablicowych zamiast 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('');
};

Link CodeSandbox z przykładami: https://codesandbox.io/s/p38k63w0vq

Użyj tego kodu do obsługi formatu waluty dla Indii. Kod kraju można zmienić w celu obsługi innej waluty krajowej.

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

// Use it.

formatter.format(amount);

wynik:

3,50,256.95

Możesz także użyć konstruktora Intl.NumberFormat . Oto jak możesz to zrobić.

 resultNumber = new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(yourNumber); 

Napisałem to przed natknięciem się na ten post. Bez wyrażeń regularnych i możesz naprawdę zrozumieć kod.

$(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>

var formatNumber = function (number) {
  var splitNum;
  number = Math.abs(number);
  number = number.toFixed(2);
  splitNum = number.split('.');
  splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return splitNum.join(".");
}

EDYCJA: Funkcja działa tylko z liczbą dodatnią. na przykład:

var number = -123123231232;
formatNumber(number)

Wyjście: „123 123 123 232 232”

Ale odpowiedź na powyższe pytanie toLocaleString()rozwiązuje problem.

var number = 123123231232;
    number.toLocaleString()

Wyjście: „123 123 123 232 232”

Dopingować!

Moja odpowiedź jest jedyną odpowiedzią, która całkowicie zastępuje jQuery bardziej sensowną alternatywą:

function $(dollarAmount)
{
    const locale = 'en-US';
    const options = { style: 'currency', currency: 'USD' };
    return Intl.NumberFormat(locale, options).format(dollarAmount);
}

To rozwiązanie nie tylko dodaje przecinki, ale także zaokrągla do najbliższego grosza, jeśli wpiszesz kwotę, np. $(1000.9999)Dostaniesz 1 001 USD. Dodatkowo wprowadzana wartość może być bezpiecznie liczbą lub łańcuchem; to nie ma znaczenia.

Jeśli masz do czynienia z pieniędzmi, ale nie chcesz, aby na kwoty pokazywał się wiodący znak dolara, możesz również dodać tę funkcję, która korzysta z poprzedniej funkcji, ale usuwa $:

function no$(dollarAmount)
{
    return $(dollarAmount).replace('$','');
}

Jeśli nie do czynienia z pieniędzmi, i mają różne wymagania formatowanie dziesiętne, tutaj jest bardziej wszechstronny funkcji:

function addCommas(number, minDecimalPlaces = 0, maxDecimalPlaces = Math.max(3,minDecimalPlaces))
{
    const options = {};
    options.maximumFractionDigits = maxDecimalPlaces;
    options.minimumFractionDigits = minDecimalPlaces;
    return Intl.NumberFormat('en-US',options).format(number);
}

A tak przy okazji, fakt, że ten kod nie działa w niektórych starych wersjach Internet Explorera, jest całkowicie zamierzony. Staram się przełamać IE za każdym razem, kiedy mogę go złapać, nie wspierając nowoczesnych standardów.

Pamiętaj, że nadmierne pochwały w komentarzach są uważane za nie na temat. Zamiast tego, po prostu obsyp mnie mnie głosami większymi.

Dla mnie najlepszą odpowiedzią jest użycie metody toLocaleString, jak powiedzieli niektórzy członkowie. Jeśli chcesz dołączyć symbol „$”, po prostu dodaj languaje i wpisz opcje. Oto i przykład sformatowania liczby w peso meksykańskie

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

skrót

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

Pozwól mi spróbować poprawić uKolka „s odpowiedź i może pomóc innym zaoszczędzić trochę czasu.

Użyj 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>

Powinieneś korzystać z Number.prototype.toLocaleString () tylko wtedy, gdy kompatybilność przeglądarki nie stanowi problemu.

Alternatywny sposób, obsługujący miejsca po przecinku, różne separatory i negatywy.

var number_format = function(number, decimal_pos, decimal_sep, thousand_sep) {
    var ts      = ( thousand_sep == null ? ',' : thousand_sep )
        , ds    = ( decimal_sep  == null ? '.' : decimal_sep )
        , dp    = ( decimal_pos  == null ? 2   : decimal_pos )

        , n     = Math.floor(Math.abs(number)).toString()

        , i     = n.length % 3 
        , f     = ((number < 0) ? '-' : '') + n.substr(0, i)
    ;

    for(;i<n.length;i+=3) {
        if(i!=0) f+=ts;
        f+=n.substr(i,3);
    }

    if(dp > 0) 
        f += ds + parseFloat(number).toFixed(dp).split('.')[1]

    return f;
}

Kilka poprawek @Jignesh Sanghani, nie zapomnij pochwalić jego komentarza.

Myślę, że ta funkcja zajmie się wszystkimi problemami związanymi z tym problemem.

function commaFormat(inputString) {
    inputString = inputString.toString();
    var decimalPart = "";
    if (inputString.indexOf('.') != -1) {
        //alert("decimal number");
        inputString = inputString.split(".");
        decimalPart = "." + inputString[1];
        inputString = inputString[0];
        //alert(inputString);
        //alert(decimalPart);

    }
    var outputString = "";
    var count = 0;
    for (var i = inputString.length - 1; i >= 0 && inputString.charAt(i) != '-'; i--) {
        //alert("inside for" + inputString.charAt(i) + "and count=" + count + " and outputString=" + outputString);
        if (count == 3) {
            outputString += ",";
            count = 0;
        }
        outputString += inputString.charAt(i);
        count++;
    }
    if (inputString.charAt(0) == '-') {
        outputString += "-";
    }
    //alert(outputString);
    //alert(outputString.split("").reverse().join(""));
    return outputString.split("").reverse().join("") + decimalPart;
}

Tylko dla przyszłych Googlersów (lub niekoniecznie „Googlersów”):

Wszystkie powyższe rozwiązania są wspaniałe, jednak RegExp może być okropnie złą rzeczą w takiej sytuacji.

Tak, możesz użyć niektórych z proponowanych opcji lub nawet napisać coś prymitywnego, ale przydatnego, takiego jak:

const strToNum = str => {

   //Find 1-3 digits followed by exactly 3 digits & a comma or end of string
   let regx = /(\d{1,3})(\d{3}(?:,|$))/;
   let currStr;

   do {
       currStr = (currStr || str.split(`.`)[0])
           .replace( regx, `$1,$2`)
   } while (currStr.match(regx)) //Stop when there's no match & null's returned

   return ( str.split(`.`)[1] ) ?
           currStr.concat(`.`, str.split(`.`)[1]) :
           currStr;

};

strToNum(`123`) // => 123
strToNum(`123456`) // => 123,456
strToNum(`-1234567.0987`) // => -1,234,567.0987

Wyrażenie regularne, które tu zastosowano, jest dość proste, a pętla przejdzie dokładnie tyle razy, ile potrzeba, aby wykonać zadanie.

Możesz go zoptymalizować znacznie lepiej, kodować „DRYify” i tak dalej.

Jeszcze,

(-1234567.0987).toLocaleString();

(w większości sytuacji) byłby zdecydowanie lepszym wyborem.

Nie chodzi o szybkość wykonywania ani kompatybilność z różnymi przeglądarkami.

W sytuacjach, gdy chcesz pokazać wynikowy numer użytkownikowi, metoda .toLocaleString () daje ci superumiejętność mówienia tym samym językiem z użytkownikiem witryny lub aplikacji (niezależnie od tego, jaki jest jego język).

Ta metoda zgodnie z dokumentacją ECMAScript została wprowadzona w 1999 r. I uważam, że powodem tego była nadzieja, że ​​Internet w pewnym momencie połączy ludzi na całym świecie, dlatego potrzebne były pewne narzędzia „internalizacji”.

Dzisiaj Internet łączy nas wszystkich, dlatego ważne jest, aby pamiętać, że świat jest znacznie bardziej złożony, niż moglibyśmy to sobie wyobrazić, i że (/ prawie) wszyscy jesteśmy tutaj , w Internecie.

Oczywiście, biorąc pod uwagę różnorodność ludzi, nie jest możliwe zagwarantowanie każdemu idealnego UX, ponieważ mówimy różnymi językami, cenimy różne rzeczy itp. I właśnie z tego powodu jeszcze ważniejsze jest, aby spróbować zlokalizować rzeczy tak bardzo, jak to możliwe .

Biorąc pod uwagę, że istnieją pewne szczególne standardy reprezentacji daty, godziny, liczb itp. I że mamy narzędzie do wyświetlania tych rzeczy w formacie preferowanym przez użytkownika końcowego, nie jest to rzadkie i prawie nieodpowiedzialne, aby nie skorzystać z tego narzędzia (szczególnie w sytuacjach, gdy chcemy wyświetlić te dane użytkownikowi)?

Dla mnie używanie RegExp zamiast .toLocaleString () w takiej sytuacji brzmi trochę jak tworzenie aplikacji zegara z JavaScript i kodowanie go w taki sposób, aby wyświetlał tylko czas w Pradze (co byłoby całkiem bezużyteczne dla ludzie, którzy nie mieszkają w Pradze), mimo że zachowanie domyślne

new Date();

jest zwracanie danych zgodnie z zegarem użytkownika końcowego.

Moje „ prawdziwe ” rozwiązanie tylko _dla wyrażeń regularnych _{dla tych, którzy kochają jedno-linijki}

Widzisz tych entuzjastycznych graczy powyżej? Może możesz z tego grać w golfa. Oto mój ruch.

n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " ").replace(/(?<=\.(\d{3})+)\B/g, " ")

_{Używa  CIENKIEJ PRZESTRZENI (U + 2009) dla separatora tysięcy, jak to powiedział Międzynarodowy System Jednostek w ósmym wydaniu (2006) ich publikacji „ SI Broszura: Międzynarodowy System Jednostek (SI) ” (patrz § 5.3 .4.). Dziewiąte wydanie (2019) sugeruje, aby wykorzystać na to miejsce (patrz §5.4.4.). Możesz użyć, co chcesz, w tym przecinek.}

Widzieć.

const integer_part_only = n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ");
const fractional_part_only = n => `${n}`.replace(/(?<=\.(\d{3})+)\B/g, " F ");
const both = n => fractional_part_only(integer_part_only(n));

function demo(number) { // I’m using Chrome 74.
	console.log(`${number}
		→ "${integer_part_only(number)}" (integer part only)
		→ "${fractional_part_only(number)}" (fractional part only)
		→ "${both(number)}" (both)
	`);
}
demo(Math.random() * 10e5);
demo(123456789.01234567);
demo(123456789);
demo(0.0123456789);

Jak to działa?

Dla części całkowitej

.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ")

• .replace(……, " I ") Wpisz „ja”
  • /……/g na każdym z
    • \B pomiędzy dwiema sąsiednimi cyframi
      • (?=……)_{POZYTYWNA LOOKAHEAD,} której prawą częścią jest
        • (\d{3})+ jeden lub więcej trzycyfrowych fragmentów
        • \b po którym następuje cyfra, taka jak kropka, zakończenie łańcucha itp.
      • (?<!……)_{NEGATYWNE SPOJRZENIE,} wyłączając te, których lewa część
        • \.\d+ to kropka, po której następują cyfry („ma separator dziesiętny”).

Za część dziesiętną

.replace(/(?<=\.(\d{3})+)\B/g, " F ")

• .replace(……, " F ") Wpisz „F”
  • /……/g na każdym z
    • \B pomiędzy dwiema sąsiednimi cyframi
      • (?<=……)_{POZYTYWNE SPOJRZENIE,} którego lewą częścią jest
        • \. separator dziesiętny
        • (\d{3})+ a następnie jeden lub więcej trzycyfrowych fragmentów.

Klasy postaci i granice

\d

Pasuje do dowolnej cyfry (cyfra arabska). Odpowiednik [0-9].

Na przykład,

• /\d/lub /[0-9]/mecze 2w B2 is the suite number.

\b

Dopasowuje granicę słowa . Jest to miejsce, w którym znak słowny nie jest poprzedzony lub poprzedzony innym znakiem słownym, na przykład między literą a spacją. Pamiętaj, że dopasowana granica słów nie jest uwzględniana w dopasowaniu. Innymi słowy, długość dopasowanej granicy słów wynosi zero.

Przykłady:

• /\bm/dopasowuje msię moon;
• /oo\b/nie pasuje do ooin moon, ponieważ oonastępuje nktóry jest postacią słowo;
• /oon\b/dopasowuje oonin moon, ponieważ oonjest końcem ciągu, a zatem nie następuje po nim znak słowny;
• /\w\b\w/ nigdy nie będzie pasować do niczego, ponieważ po słowie nigdy nie może występować zarówno znak niebędący słowem, jak i znak słowny.

\B

Dopasowuje granicę inną niż słowo . Jest to pozycja, w której poprzedni i następny znak są tego samego typu: oba muszą być słowami, lub oba muszą być nie słowami. Na przykład między dwiema literami lub między dwiema spacjami. Początek i koniec łańcucha są traktowane jako słowa bez słów. Podobnie jak dopasowana granica słowa, dopasowana granica słowa nie jest również uwzględniana w dopasowaniu.

Na przykład,

• /\Bon/mecze onw at noon;
• /ye\B/mecze yew possibly yesterday.

Kompatybilność z przeglądarkami

• https://caniuse.com/#feat=js-regexp-lookbehind

Dodałem tofixed do rozwiązania Aki143S . To rozwiązanie wykorzystuje kropki dla tysięcy separatorów i przecinek dla precyzji.

function formatNumber( num, fixed ) { 
    var decimalPart;

    var array = Math.floor(num).toString().split('');
    var index = -3; 
    while ( array.length + index > 0 ) { 
        array.splice( index, 0, '.' );              
        index -= 4;
    }

    if(fixed > 0){
        decimalPart = num.toFixed(fixed).split(".")[1];
        return array.join('') + "," + decimalPart; 
    }
    return array.join(''); 
};

Przykłady;

formatNumber(17347, 0)  = 17.347
formatNumber(17347, 3)  = 17.347,000
formatNumber(1234563.4545, 3)  = 1.234.563,454

Wiele dobrych odpowiedzi już. Oto kolejna, dla zabawy:

function format(num, fix) {
    var p = num.toFixed(fix).split(".");
    return p[0].split("").reduceRight(function(acc, num, i, orig) {
        if ("-" === num && 0 === i) {
            return num + acc;
        }
        var pos = orig.length - i - 1
        return  num + (pos && !(pos % 3) ? "," : "") + acc;
    }, "") + (p[1] ? "." + p[1] : "");
}

Kilka przykładów:

format(77.03453, 2); // "77.03"
format(78436589374); // "78,436,589,374"
format(784, 4);      // "784.0000"
format(-123456);     // "-123,456"