Я намагаюся надрукувати ціле число в 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;
}

Чи є простіший або елегантніший спосіб зробити це? Було б непогано, якби це працює і з поплавками, але це не обов'язково. Не потрібно визначати локаль для визначення періодів і коми.

Я використав ідею з відповіді Керрі, але спростив її, оскільки я просто шукав щось просте для своєї конкретної мети. Ось що я зробив:

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

У регулярному вираженні використовуються 2 твердження lookahead:

• позитивний, щоб шукати будь-яку точку в рядку, що має кратне 3-х цифр поспіль після неї,
• негативне твердження, щоб переконатися, що точка має лише кратне 3 цифри. Вираз заміни ставить туди кому.

Наприклад, якщо ви передасте його 123456789.01, позитивне твердження буде відповідати кожній точці ліворуч від 7 (оскільки 789кратна 3 цифрам, 678кратна 3 цифрам 567тощо). Негативне твердження перевіряє, що кратне 3-х цифр після нього не має жодних цифр. 789після нього є період, тому він точно кратний 3-х цифр, тому кома йде туди. 678є кратним 3-х цифр, але він має 9після нього, тому ці 3 цифри входять до групи 4-х, і кома туди не йде. Аналогічно для 567. 456789це 6 цифр, що кратно 3, тому перед цим йде кома. 345678кратний 3, але він має 9після нього, тому жодна кома не йде туди. І так далі. The\B не дозволяє регулярному вираженню ставити кому на початку рядка.

@ neu-rah зазначав, що ця функція додає коси в небажаних місцях, якщо після десяткової коми є більше 3 цифр. Якщо це проблема, ви можете скористатися цією функцією:

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 вказував, що тепер, коли JavaScript має відстань ( інформація про підтримку ), це можна вирішити в регулярному виразі:

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*)- це негативний вигляд, який говорить про те, що перед матчем не може передувати .нуль або більше цифр. Негативна швидше перегляду назад , ніж splitта joinрішення ( порівняння ), по крайней мере , в V8.

Я здивований, що ніхто не згадав Number.prototype.toLocaleString . Він реалізований у JavaScript 1.5 (який був представлений у 1999 році), тому він в основному підтримується у всіх основних браузерах.

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

Він також працює в Node.js станом на v0.12 через включення Intl

Просто зверніть увагу, що ця функція повертає рядок, а не число.

Якщо ви хочете чогось іншого, Numeral.js може бути цікавим.

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

Майте на увазі, що у JavaScript має максимальне ціле значення 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 не підтримується):

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

З того, що я перевірив (принаймні Firefox), вони обидва більш-менш однакові щодо продуктивності.

Я пропоную використовувати номер_формату 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);
}

ОНОВЛЕННЯ 13.02.14

Люди повідомили, що це не працює, як очікувалося, тому я зробив Скрипт JS, який включає автоматизовані тести.

Оновлення 26.11.2017

Ось ця скрипка як фрагмент стека з дещо зміненим результатом:

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

Це варіант відповіді @ mikez302, але модифікований для підтримки номерів із десятковою комою (за відгуками @ neu-rah, що числоWithCommas (12345.6789) -> "12,345.6,789" замість "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

Використання регулярного вираження

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

Використання 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 ()

Використання 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

ДЕМО ТУТ

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

Продуктивність

http://jsben.ch/sifRd

Intl.NumberFormat

Рідна функція JS. Підтримується IE11, Edge, останні Safari, Chrome, Firefox, Opera, Safari на iOS та Chrome на Android.

var number = 3500;

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

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

Перший фрагмент коду додає функцію , яка імітує PHP «S number_format()на номер прототипу. Якщо я форматую число, я зазвичай хочу десяткових знаків, щоб ця функція мала кількість десяткових знаків для показу. Деякі країни використовують коми як десятковий і десятковий знак як роздільник тисяч, тому функція дозволяє встановлювати ці роздільники.

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

Ви використовуєте це так:

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

Я виявив, що мені часто потрібно повернути число для математичних операцій, але parseFloat перетворює 5000 на 5, просто приймаючи першу послідовність цілих значень. Тому я створив власну функцію перетворення поплавця і додав її до прототипу 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));
}

Тепер ви можете використовувати обидві функції так:

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

Мене дуже вразила кількість відповідей на це запитання. Мені подобається відповідь uKolka :

n.toLocaleString()

Але, на жаль, у деяких місцевостях, таких як іспанська, він не працює (IMHO), як очікувалося, для цифр нижче 10 000:

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

Дає 1000і ні 1.000.

Дивіться toLocaleString, що не працює над номерами менше 10000 у всіх браузерах, щоб знати, чому.

Тому мені довелося скористатися відповіддю Еліаса Замарії, вибравши правильний символ роздільника тисяч:

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

Цей працює добре як однофайл для обох локалів, які використовують ,або .як роздільник тисяч, і починає працювати з 1000 у всіх випадках.

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

Надає 1.000з контекстом іспанської мови.

Якщо ви хочете мати абсолютний контроль над форматуванням номера, ви можете також спробувати наступне:

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)

Дає 1,234.57.

Цей не потребує регулярного вираження. Він працює, налаштовуючи число до потрібної кількості десяткових знаків toFixedспочатку, а потім ділить його навколо десяткової крапки, .якщо така є. Потім лівий бік перетворюється на масив цифр, який перевертається. Потім додається роздільник тисяч кожні три цифри від початку, а результат знову змінюється. Кінцевий результат - об'єднання двох частин. Знак вхідного номера Math.absспочатку видаляється, а потім, якщо необхідно, ставиться назад.

Це не однолінійний, але не набагато довший і легко перетворюється на функцію. Змінні додані для наочності, але вони можуть бути замінені їх бажаними значеннями, якщо вони будуть відомі заздалегідь. Ви можете використовувати вирази, які використовують toLocaleStringяк спосіб пошуку правильних символів для десяткової крапки та роздільника тисяч для поточного локалу (майте на увазі, що для них потрібен більш сучасний Javascript.)

Я думаю, що це найкоротший регулярний вираз:

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

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

Я перевірив це на кілька цифр, і воно спрацювало.

Number.prototype.toLocaleString()було б приголомшливо, якби це було надано всіма браузерами (Safari) .

Я перевірив усі інші відповіді, але, здається, ніхто не заповнив її. Ось покута до цього, що насправді є поєднанням перших двох відповідей; якщо toLocaleStringпрацює, він використовує його, якщо він не - використовує власну функцію.

var putThousandsSeparators;

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

alert(putThousandsSeparators(1234567.890));

Розділювач тисяч можна вставити міжнародним способом за допомогою Intlоб’єкта браузера :

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

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

Intl.NumberFormat поки не доступний у всіх браузерах, але він працює в останніх Chrome, Opera та IE. Наступний реліз Firefox повинен підтримувати його. Схоже, Webkit не має часової шкали для впровадження.

Ви можете скористатися цією процедурою для форматування потрібної валюти.

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

Для отримання додаткової інформації ви можете отримати доступ до цього посилання.

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

якщо ви маєте справу з цінностями валюти і багато форматуєте, тоді, можливо, варто додати крихітний букет Account.js, який обробляє безліч кращих справ та локалізацію:

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

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

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

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

У наведеному нижче коді використовується сканування char, тому немає регулярного вираження.

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

Це показує перспективні показники: http://jsperf.com/number-formatting-with-commas/5

2015.4.26: Незначне виправлення для вирішення проблеми, коли число <0. Дивіться https://jsfiddle.net/runsun/p5tqqvs3/

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

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

Посилання CodeSandbox із прикладами: https://codesandbox.io/s/p38k63w0vq

Використовуйте цей код для обробки формату валюти для Індії. Код країни можна змінити для обробки іншої валюти країни.

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

// Use it.

formatter.format(amount);

вихід:

3,50,256.95

Ви також можете використовувати конструктор Intl.NumberFormat . Ось як це можна зробити.

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

Я написав цю, перш ніж натрапити на цю посаду. Немає регулярного вираження, і ви дійсно можете зрозуміти код.

$(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: Функція працює лише з додатним числом. для прикладу:

var number = -123123231232;
formatNumber(number)

Вихід: "123,123,231,232"

Але відповісти на вищезазначене питання toLocaleString()метод просто вирішує проблему.

var number = 123123231232;
    number.toLocaleString()

Вихід: "123,123,231,232"

Ура!

Моя відповідь - єдина відповідь, яка повністю замінює jQuery набагато розумнішою альтернативою:

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

Це рішення не тільки додає комами, але й обертається до найближчої копійки, якщо ви введете суму, на зразок якої $(1000.9999)ви отримаєте 1 001,00 доларів. Крім того, введене вами значення може безпечно бути числом або рядком; це не має значення.

Якщо ви маєте справу з грошима, але не хочете, щоб на сумі відображався знак провідного долара, ви також можете додати цю функцію, яка використовує попередню функцію, але видаляє $:

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

Якщо ви не маєте справу з грошима і маєте різні вимоги до форматування десяткової форми, ось більш універсальна функція:

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

Ну, і до речі, той факт, що цей код не працює в якійсь старій версії Internet Explorer, є цілком навмисним. Я намагаюся порушити IE в будь-який час, що можу зловити його, не підтримуючи сучасних стандартів.

Пам'ятайте, що надмірна похвала в розділі коментарів вважається поза темою. Натомість просто засипте мене голосами.

Для мене найкращою відповіддю є використання toLocaleString, як казали деякі члени. Якщо ви хочете включити символ "$", просто додайте параметри Languageje та введіть. Ось і приклад відформатувати число в мексиканському песо

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

ярлик

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

Дозвольте мені спробувати поліпшити uKolka «s відповіді і , можливо , допомогти іншим заощадити деякий час.

Використовуйте Numeral.js .

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

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

Ви маєте працювати з Number.prototype.toLocaleString (), лише якщо сумісність браузера не є проблемою.

Альтернативний спосіб, що підтримує десяткові символи, різні роздільники та негативи.

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

Деякі виправлення @Jignesh Sanghani, не забудьте підтримати його коментар.

Я думаю, що ця функція допоможе вирішити всі питання, пов'язані з цією проблемою.

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

Просто для майбутніх Googleр (або не обов'язково "Googlers"):

Всі рішення, згадані вище, чудові, проте RegExp може бути дуже погано використовувати у такій ситуації.

Отже, так, ви можете використовувати деякі запропоновані варіанти або навіть написати щось примітивне, але корисне, наприклад:

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

Використовувана тут регулярна виразка досить проста, і цикл пройде точно стільки разів, скільки потрібно, щоб виконати роботу.

І ви можете оптимізувати його набагато краще, "DRYify" код тощо.

І все-таки,

(-1234567.0987).toLocaleString();

(у більшості ситуацій) був би набагато кращим вибором.

Справа не в швидкості виконання або в сумісності браузера.

У ситуаціях, коли ви хочете показати отриманий номер користувачеві, метод .toLocaleString () дає вам наддержаву говорити однією мовою з користувачем вашого веб-сайту чи програми (незалежно від її мови та мови).

Цей метод відповідно до документації ECMAScript був запроваджений у 1999 році, і я вважаю, що причиною цього стала надія на те, що Інтернет в якийсь момент з'єднає людей у ​​всьому світі, тому потрібні були певні інструменти "інтерналізації".

Сьогодні Інтернет дійсно з'єднує всіх нас, тому важливо пам’ятати, що світ - це складний спосіб, який ми могли б собі уявити, і що (/ майже) всі ми тут , в Інтернеті.

Очевидно, враховуючи різноманітність людей, неможливо гарантувати ідеальний UX для всіх, тому що ми розмовляємо різними мовами, цінуємо різні речі і т. Д. І саме через це ще важливіше намагатися максимально локалізувати речі. .

Отже, враховуючи, що існують певні стандарти представлення дати, часу, цифр тощо. І що у нас є інструмент для відображення цих речей у форматі, який бажає кінцевий користувач, не так вже й рідко і майже безвідповідально не використовувати цей інструмент (особливо в ситуаціях, коли ми хочемо відобразити ці дані користувачеві)?

Для мене використання RegExp замість .toLocaleString () у подібній ситуації звучить трохи схоже на створення додатку для годинника з JavaScript та жорстким кодуванням його таким чином, щоб воно відображало лише празький час (що було б зовсім марно люди, які не живуть у Празі), хоча поведінка за замовчуванням

new Date();

полягає в поверненні даних відповідно до годин кінцевого користувача.

Моє « справжнє » рішення, що _{стосується} лише регулярних виразів, _{для тих, хто любить одноосібники}

Ви бачите цих захоплених гравців вище? Можливо, ви можете з цього вийти на гольф. Ось мій штрих.

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

_{Використовує  тонкий простір (U + 2009) для тисячного роздільника, як це говорило Міжнародна система одиниць у восьмому виданні (2006) своєї публікації « Брошура СІ: Міжнародна система одиниць (СІ) » (Див. §5.3 .4.). Дев'яте видання (2019) пропонує використовувати пробіл для нього (Див. § 5.4.4.). Ви можете використовувати все, що завгодно, включаючи кому.}

Подивитися.

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

Як це працює?

Для цілої частини

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

• .replace(……, " I ") Поставте "Я"
  • /……/g на кожному з
    • \B проміжок між двома сусідніми цифрами
      • (?=……)_{ПОЗИТИВНИЙ ЛОКАХА} , права частина якого є
        • (\d{3})+ один або кілька трицифрових шматочків
        • \b супроводжуються нецифровими цифрами, такими як період, закінчення рядка тощо
      • (?<!……)_{НЕГАТИВНИЙ ЛОКБЕХІНД,} виключаючи ті, у яких ліва частина
        • \.\d+ - крапка, за якою слідують цифри ("має десятковий роздільник").

Для десяткової частини

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

• .replace(……, " F ") Поставте "F"
  • /……/g на кожному з
    • \B проміжок між двома сусідніми цифрами
      • (?<=……)_{ПОЗИТИВНИЙ ЛОКБЕХІНД} , ліва частина якого
        • \. десятковий роздільник
        • (\d{3})+ слідом за одним або декількома трицифровими шматками.

Класи персонажів та межі

\d

Відповідає будь-якій цифрі (арабська цифра). Еквівалентно [0-9].

Наприклад,

• /\d/або /[0-9]/збігів 2у B2 is the suite number.

\b

Відповідає межі слова . Це положення, коли символу слова не слідкує або передує інший слово-символ, наприклад, між літерою та пробілом. Зауважте, що межі відповідних слів не включаються до збігу. Іншими словами, довжина межі відповідного слова дорівнює нулю.

Приклади:

• /\bm/відповідає mв moon;
• /oo\b/не відповідає знаку " ooв" moon, тому що ooслідує за nсимволом слова;
• /oon\b/збігається з oonin moon, тому що oonце кінець рядка, таким чином, не супроводжується символом слова;
• /\w\b\w/ ніколи нічого не відповідатиме, тому що символу слова ніколи не може супроводжуватись як символом не слова, так і словом.

\B

Відповідає межі без слів . Це положення, коли попередній і наступний символи мають один і той же тип: або обидва повинні бути словами, або обидва повинні бути не словами. Наприклад, між двома літерами або між двома пробілами. Початок і кінець рядка вважаються несловами. Як і межа межі відповідного слова, відповідна межа без слів також не включається в збіг.

Наприклад,

• /\Bon/сірники onв at noon;
• /ye\B/сірники yeв possibly yesterday.

Сумісність браузера

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

Я додав tofixed до рішення Aki143S . У цьому рішенні використовуються крапки для тисяч роздільників і кома для точності.

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

Приклади;

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

Уже багато хороших відповідей. Ось ще один, просто для розваги:

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

Деякі приклади:

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