Saya mencoba untuk mencetak bilangan bulat dalam JavaScript dengan koma sebagai pemisah ribuan. Misalnya, saya ingin menunjukkan nomor 1234567 sebagai "1.234.567". Bagaimana saya bisa melakukan ini?

Inilah cara saya melakukannya:

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

Apakah ada cara yang lebih sederhana atau lebih elegan untuk melakukannya? Akan lebih baik jika bekerja dengan pelampung juga, tetapi itu tidak perlu. Tidak perlu spesifik lokal untuk memutuskan antara periode dan koma.

Saya menggunakan ide dari jawaban Kerry, tetapi menyederhanakannya karena saya hanya mencari sesuatu yang sederhana untuk tujuan spesifik saya. Inilah yang saya lakukan:

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

Regex menggunakan 2 pernyataan lookahead:

• yang positif untuk mencari titik mana pun dalam string yang memiliki kelipatan 3 digit berturut-turut setelahnya,
• pernyataan negatif untuk memastikan bahwa titik tersebut hanya memiliki kelipatan 3 digit. Ekspresi pengganti menempatkan koma di sana.

Misalnya, jika Anda melewatinya 123456789.01, pernyataan positif akan cocok dengan setiap tempat di sebelah kiri 7 (karena 789kelipatan 3 digit, 678kelipatan 3 digit 567, dll.). Pernyataan negatif memeriksa bahwa kelipatan 3 digit tidak memiliki digit apa pun setelahnya. 789memiliki titik setelahnya sehingga persis kelipatan 3 digit, jadi koma ada di sana. 678adalah kelipatan dari 3 digit tetapi memiliki 9setelah itu, sehingga 3 digit tersebut adalah bagian dari grup 4, dan koma tidak pergi ke sana. Demikian pula untuk 567. 456789adalah 6 digit, yang merupakan kelipatan dari 3, jadi koma berjalan sebelum itu. 345678adalah kelipatan dari 3, tetapi memiliki 9setelahnya, jadi tidak ada koma di sana. Dan seterusnya. Itu\B menjaga regex dari meletakkan koma di awal string.

@ neu-rah menyebutkan bahwa fungsi ini menambahkan koma di tempat yang tidak diinginkan jika ada lebih dari 3 digit setelah titik desimal. Jika ini merupakan masalah, Anda dapat menggunakan fungsi ini:

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 menunjukkan bahwa sekarang JavaScript telah melihat di belakang ( info dukungan ), itu dapat diselesaikan dalam ekspresi reguler itu sendiri:

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*)adalah pandangan negatif di belakang yang mengatakan bahwa pertandingan tidak dapat didahului oleh angka .nol atau lebih yang diikuti. Tampilan negatif di belakang lebih cepat daripada splitdan joinsolusi ( perbandingan ), setidaknya dalam V8.

Saya terkejut tidak ada yang menyebutkan Number.prototype.toLocaleString . Ini diimplementasikan dalam JavaScript 1.5 (yang diperkenalkan pada tahun 1999) sehingga pada dasarnya didukung di semua browser utama.

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

Ia juga bekerja di Node.js pada v0.12 melalui penyertaan Intl

Perhatikan saja bahwa fungsi ini mengembalikan string, bukan angka.

Jika Anda menginginkan sesuatu yang berbeda, Numeral.js mungkin menarik.

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

⚠ Pikirkan bahwa javascript memiliki nilai integer maksimum 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 tidak didukung):

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

Dari apa yang saya periksa (setidaknya Firefox) keduanya kurang lebih sama tentang kinerja.

Saya sarankan menggunakan number_format () phpjs.org

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

UPDATE 02/13/14

Orang-orang telah melaporkan ini tidak berfungsi seperti yang diharapkan, jadi saya melakukan JS Fiddle yang mencakup tes otomatis.

Pembaruan 26/11/2017

Berikut biola itu sebagai Cuplikan Stack dengan output yang sedikit dimodifikasi:

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

Ini adalah variasi dari jawaban @ mikez302, tetapi dimodifikasi untuk mendukung angka dengan desimal (per umpan balik @ neu-rah bahwa numberWithCommas (12345.6789) -> "12.345.6.789" bukan "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

Menggunakan ekspresi Reguler

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

Menggunakan 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 ()

Menggunakan 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 DI SINI

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

Performa

http://jsben.ch/sifRd

Intl.NumberFormat

Fungsi JS asli. Didukung oleh IE11, Edge, Safari terbaru, Chrome, Firefox, Opera, Safari di iOS dan Chrome di Android.

var number = 3500;

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

Terima kasih untuk semua orang atas balasan mereka. Saya telah membangun beberapa jawaban untuk membuat solusi yang lebih "satu ukuran untuk semua".

Potongan pertama menambahkan fungsi yang meniru PHP 's number_format()untuk prototipe Nomor. Jika saya memformat angka, saya biasanya ingin tempat desimal sehingga fungsinya menunjukkan jumlah tempat desimal untuk ditampilkan. Beberapa negara menggunakan koma sebagai desimal dan desimal sebagai pemisah ribuan sehingga fungsinya memungkinkan pemisah ini diatur.

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

Anda akan menggunakan ini sebagai berikut:

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

Saya menemukan bahwa saya sering perlu mendapatkan nomor kembali untuk operasi matematika, tetapi parseFloat mengubah 5.000 menjadi 5, hanya mengambil urutan pertama dari nilai integer. Jadi saya membuat fungsi konversi float saya sendiri dan menambahkannya ke prototipe 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));
}

Sekarang Anda dapat menggunakan kedua fungsi sebagai berikut:

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

Saya cukup terkesan dengan jumlah jawaban yang didapat pertanyaan ini. Saya suka jawabannya oleh uKolka :

n.toLocaleString()

Namun sayangnya, di beberapa lokal seperti Spanyol, itu tidak berfungsi (IMHO) seperti yang diharapkan untuk angka di bawah 10.000:

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

Memberi 1000dan tidak 1.000.

Lihat toLocaleString yang tidak bekerja pada angka kurang dari 10.000 di semua browser untuk mengetahui alasannya.

Jadi saya harus menggunakan jawaban oleh Elias Zamaria memilih karakter pemisah ribuan yang tepat:

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

Yang ini berfungsi baik sebagai satu-liner untuk kedua lokal yang menggunakan ,atau .sebagai pemisah ribuan dan mulai bekerja dari 1.000 dalam semua kasus.

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

Memberi 1.000dengan konteks lokal Spanyol.

Jika Anda ingin memiliki kontrol mutlak atas cara angka diformat, Anda juga dapat mencoba yang berikut:

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)

Memberi 1,234.57.

Yang ini tidak perlu ekspresi reguler. Ia bekerja dengan menyesuaikan angka dengan jumlah desimal yang diinginkan dengan yang toFixedpertama, kemudian membaginya di sekitar titik desimal .jika ada. Sisi kiri kemudian diubah menjadi array angka yang dibalik. Kemudian pemisah ribuan ditambahkan setiap tiga digit dari awal dan hasilnya dibalik lagi. Hasil akhirnya adalah penyatuan dua bagian. Tanda nomor input dihapus dengan Math.absterlebih dahulu dan kemudian dimasukkan kembali jika perlu.

Ini bukan satu-liner tetapi tidak lebih lama dan mudah berubah menjadi fungsi. Variabel telah ditambahkan untuk kejelasan, tetapi mereka dapat diganti dengan nilai yang diinginkan jika diketahui sebelumnya. Anda dapat menggunakan ekspresi yang digunakan toLocaleStringsebagai cara untuk mengetahui karakter yang tepat untuk titik desimal dan pemisah ribuan untuk lokal saat ini (perlu diingat bahwa mereka memerlukan Javascript yang lebih modern.)

Saya pikir ini adalah ekspresi reguler terpendek yang melakukannya:

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

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

Saya memeriksanya di beberapa nomor dan berhasil.

Number.prototype.toLocaleString()akan luar biasa jika disediakan secara native oleh semua browser (Safari) .

Saya memeriksa semua jawaban lain tetapi tampaknya tidak ada yang mengisinya. Berikut ini adalah titik menuju itu, yang sebenarnya merupakan kombinasi dari dua jawaban pertama; jika toLocaleStringberfungsi, gunakan, jika tidak, gunakan fungsi khusus.

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

Pemisah ribuan dapat dimasukkan dengan cara yang ramah internasional menggunakan objek browser Intl:

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

Lihat artikel MDN di NumberFormat untuk lebih lanjut, Anda dapat menentukan perilaku lokal atau default untuk pengguna. Ini sedikit lebih mudah karena menghargai perbedaan lokal; banyak negara menggunakan periode untuk memisahkan digit sementara koma menunjukkan desimal.

Intl.NumberFormat belum tersedia di semua browser, tetapi berfungsi di Chrome, Opera, & IE terbaru. Rilis Firefox berikutnya harus mendukungnya. Webkit tampaknya tidak memiliki garis waktu untuk implementasi.

Anda dapat menggunakan prosedur ini untuk memformat mata uang Anda.

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

Untuk info lebih lanjut, Anda dapat mengakses tautan ini.

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

jika Anda berurusan dengan nilai mata uang dan banyak memformat, mungkin ada baiknya menambahkan accounting.js kecil yang menangani banyak kasus tepi dan pelokalan:

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

Kode berikut menggunakan char scan, jadi tidak ada regex.

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

Ini menunjukkan kinerja yang menjanjikan: http://jsperf.com/number-formatting-with-commas/5

2015.4.26: Perbaikan kecil untuk menyelesaikan masalah ketika jumlah <0. Lihat https://jsfiddle.net/runsun/p5tqqvs3/

Berikut adalah fungsi sederhana yang memasukkan koma untuk ribuan pemisah. Ini menggunakan fungsi array daripada 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('');
};

Tautan CodeSandbox dengan contoh: https://codesandbox.io/s/p38k63w0vq

Gunakan kode ini untuk menangani format mata uang untuk india. Kode negara dapat diubah untuk menangani mata uang negara lain.

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

// Use it.

formatter.format(amount);

keluaran:

3,50,256.95

Anda juga dapat menggunakan konstruktor Intl.NumberFormat . Inilah cara Anda dapat melakukannya.

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

Saya menulis yang ini sebelum menemukan posting ini. Tidak ada regex dan Anda benar-benar dapat memahami kode tersebut.

$(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(".");
}

EDIT: Fungsi ini hanya berfungsi dengan angka positif. untuk exmaple:

var number = -123123231232;
formatNumber(number)

Output: "123,123,231,232"

Tetapi untuk menjawab pertanyaan di atas toLocaleString()metode hanya memecahkan masalah.

var number = 123123231232;
    number.toLocaleString()

Output: "123,123,231,232"

Bersorak!

Jawaban saya adalah satu-satunya jawaban yang sepenuhnya menggantikan jQuery dengan alternatif yang jauh lebih masuk akal:

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

Solusi ini tidak hanya menambahkan koma, tetapi juga membulatkan ke sen terdekat jika Anda memasukkan jumlah seperti $(1000.9999)Anda akan mendapatkan $ 1,001.00. Selain itu, nilai yang Anda masukkan dapat dengan aman berupa angka atau string; itu tidak masalah.

Jika Anda berurusan dengan uang, tetapi tidak ingin tanda dolar terkemuka ditampilkan pada jumlah, Anda juga dapat menambahkan fungsi ini, yang menggunakan fungsi sebelumnya tetapi menghilangkan $:

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

Jika Anda tidak berurusan dengan uang, dan memiliki beragam persyaratan pemformatan desimal, inilah fungsi yang lebih fleksibel:

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

Oh, dan omong-omong, fakta bahwa kode ini tidak berfungsi di beberapa versi lama Internet Explorer sepenuhnya disengaja. Saya mencoba untuk menghancurkan IE kapan saja saya dapat menangkapnya tidak mendukung standar modern.

Harap ingat bahwa pujian yang berlebihan, di bagian komentar, dianggap di luar topik. Sebagai gantinya, cukup beri aku suara.

Bagi saya, jawaban terbaik adalah menggunakan toLocaleString seperti yang dikatakan beberapa anggota. Jika Anda ingin memasukkan simbol '$', tambahkan saja languaje dan ketik opsi. Berikut adalah dan contoh untuk memformat angka ke Peso Meksiko

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

jalan pintas

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

Biarkan saya mencoba untuk meningkatkan uKolka 's jawaban dan mungkin bantuan orang lain menghemat waktu.

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

Anda harus menggunakan Number.prototype.toLocaleString () hanya jika kompatibilitas browsernya tidak menjadi masalah.

Cara alternatif, mendukung desimal, pemisah dan negatif yang berbeda.

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

Beberapa koreksi oleh @Jignesh Sanghani, jangan lupa untuk mengunggah komentarnya.

Saya pikir fungsi ini akan menangani semua masalah yang terkait dengan masalah ini.

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

Hanya untuk Googler masa depan (atau tidak harus 'Googler'):

Semua solusi yang disebutkan di atas sangat bagus, namun, RegExp mungkin merupakan hal yang sangat buruk untuk digunakan dalam situasi seperti itu.

Jadi, ya, Anda dapat menggunakan beberapa opsi yang diusulkan atau bahkan menulis sesuatu yang primitif namun bermanfaat seperti:

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

Regexp yang digunakan di sini cukup sederhana dan perulangan akan berjalan tepat berapa kali yang dibutuhkan untuk menyelesaikan pekerjaan.

Dan Anda mungkin mengoptimalkannya jauh lebih baik, kode "KERING" & sebagainya.

Namun,

(-1234567.0987).toLocaleString();

(dalam kebanyakan situasi) akan menjadi pilihan yang jauh lebih baik.

Intinya bukan dalam kecepatan eksekusi atau kompatibilitas lintas-browser.

Dalam situasi ketika Anda ingin menunjukkan angka yang dihasilkan kepada pengguna, metode .toLocaleString () memberi Anda kekuatan super untuk berbicara bahasa yang sama dengan pengguna situs web atau aplikasi Anda (apa pun bahasanya).

Metode ini menurut dokumentasi ECMAScript diperkenalkan pada tahun 1999, dan saya percaya bahwa alasannya adalah harapan bahwa Internet pada suatu saat akan menghubungkan orang-orang di seluruh dunia, jadi, beberapa alat "internalisasi" diperlukan.

Hari ini Internet memang menghubungkan kita semua, jadi, penting untuk diingat bahwa dunia adalah cara yang lebih kompleks yang dapat kita bayangkan & bahwa (hampir) kita semua ada di sini , di Internet.

Jelas, mengingat keragaman orang, tidak mungkin untuk menjamin UX yang sempurna untuk semua orang karena kami berbicara bahasa yang berbeda, menghargai hal-hal yang berbeda, dll. Dan justru karena ini, bahkan lebih penting untuk mencoba melokalkan hal-hal sebanyak mungkin .

Jadi, mengingat ada beberapa standar khusus untuk representasi tanggal, waktu, angka, dll. & Bahwa kami memiliki alat untuk menampilkan hal-hal tersebut dalam format yang disukai oleh pengguna akhir, bukankah itu jarang dan hampir tidak bertanggung jawab untuk tidak gunakan alat itu (terutama dalam situasi ketika kita ingin menampilkan data ini kepada pengguna)?

Bagi saya, menggunakan RegExp alih-alih .toLocaleString () dalam situasi seperti itu terdengar sedikit seperti membuat aplikasi jam dengan JavaScript & mengkodekannya sedemikian rupa sehingga hanya akan menampilkan waktu Praha (yang akan sangat tidak berguna untuk orang yang tidak tinggal di Praha) meskipun perilaku default

new Date();

adalah mengembalikan data sesuai dengan jam pengguna akhir.

Saya “ benar ” biasa-ekspresi-satunya solusi _{bagi mereka cinta satu kalimat}

Anda melihat para pemain yang antusias di atas? Mungkin Anda bisa bermain golf darinya. Inilah stroke saya.

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

_{Gunakan  THIN SPACE (U + 2009) untuk pemisah ribuan, seperti yang dikatakan oleh Sistem Satuan Internasional dalam edisi kedelapan (2006) publikasi mereka " Brosur SI: Sistem Satuan Internasional (SI) " (Lihat §5.3 .4.). Edisi kesembilan (2019) menyarankan untuk menggunakan ruang untuk itu (Lihat §5.4.4.). Anda dapat menggunakan apa pun yang Anda inginkan, termasuk koma.}

Lihat.

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

Bagaimana cara kerjanya?

Untuk bagian integer

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

• .replace(……, " I ") Masukkan "Aku"
  • /……/g di masing-masing
    • \B di antara dua digit yang berdekatan
      • (?=……)_{LOOKAHEAD POSITIF} yang bagian kanannya adalah
        • (\d{3})+ satu atau lebih potongan tiga digit
        • \b diikuti oleh non-digit, seperti, titik, akhir string, dan lain-lain,
      • (?<!……)_{LOOKBEHIND NEGATIF} tidak termasuk yang bagian kirinya
        • \.\d+ adalah titik yang diikuti oleh angka ("memiliki pemisah desimal").

Untuk bagian desimal

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

• .replace(……, " F ") Masukan "F"
  • /……/g di masing-masing
    • \B di antara dua digit yang berdekatan
      • (?<=……)_{LOOKBEHIND POSITIF} yang bagian kirinya adalah
        • \. pemisah desimal
        • (\d{3})+ diikuti oleh satu atau lebih potongan tiga digit.

Kelas karakter dan batasan

\d

Cocok dengan angka apa saja (angka Arab). Setara dengan [0-9].

Sebagai contoh,

• /\d/atau /[0-9]/cocok 2dengan B2 is the suite number.

\b

Cocok dengan batas kata . Ini adalah posisi di mana karakter kata tidak diikuti atau didahului oleh karakter-kata lain, seperti antara huruf dan spasi. Perhatikan bahwa batas kata yang cocok tidak termasuk dalam pertandingan. Dengan kata lain, panjang batas kata yang cocok adalah nol.

Contoh:

• /\bm/cocok dengan mdi moon;
• /oo\b/tidak sesuai dengan oodi moon, karena oodiikuti oleh nyang merupakan karakter kata;
• /oon\b/cocok dengan oondi moon, karena oonadalah akhir dari string, sehingga tidak diikuti oleh karakter kata;
• /\w\b\w/ tidak akan pernah cocok dengan apa pun, karena karakter kata tidak pernah dapat diikuti oleh karakter non-kata dan kata.

\B

Cocok dengan batas non-kata . Ini adalah posisi di mana karakter sebelumnya dan berikutnya dari jenis yang sama: baik keduanya harus kata-kata, atau keduanya harus bukan kata-kata. Seperti antara dua huruf atau antara dua spasi. Awal dan akhir string dianggap bukan kata-kata. Sama seperti batas kata yang cocok, batas non-kata yang cocok juga tidak termasuk dalam pertandingan.

Sebagai contoh,

• /\Bon/cocok ondi at noon;
• /ye\B/cocok yedi possibly yesterday.

Kompatibilitas browser

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

Saya menambahkan tofixed ke solusi Aki143S . Solusi ini menggunakan titik-titik untuk ribuan pemisah dan koma untuk presisi.

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

Contoh;

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

Sudah banyak jawaban bagus. Ini satu lagi, hanya untuk bersenang-senang:

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

Beberapa contoh:

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