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

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

Обратитесь к MDN

1477
задан whackamadoodle3000 13 December 2017 в 04:11
поделиться

8 ответов

Я использовал идею из ответа Керри, но упростил ее, так как я просто искал что-то простое для моей конкретной цели. Вот что я сделал:

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

Это все, что вам действительно нужно знать.

@Neils Bom спросил, как работает регулярное выражение. Мое объяснение довольно длинное. Это не поместится в комментариях, и я не знаю, где еще его разместить, поэтому делаю это здесь. Если у кого-то есть другие предложения, где его поставить, дайте мне знать.

Регулярное выражение использует 2 утверждения с опережением просмотра: положительное для поиска любой точки в строке, которая имеет число, кратное 3 цифрам в строке после нее, и отрицательное утверждение, чтобы убедиться, что эта точка имеет только кратное 3 цифры. Выражение замены ставит там запятую.

Например, если вы передадите ему «123456789.01», положительное утверждение будет соответствовать каждой точке слева от 7 (поскольку «789» кратно 3 цифрам, «678» кратно 3 цифрам, » 567 "и др.). Отрицательное утверждение проверяет, что после числа, кратного 3 цифрам, нет цифр. После «789» стоит точка, поэтому оно точно кратно трем цифрам, поэтому здесь ставится запятая. «678» кратно 3-м цифрам, но после него стоит «9», поэтому эти 3 цифры являются частью группы из 4-х цифр, и запятая здесь не идет. Аналогично для «567». «456789» - это 6 цифр, кратное 3, поэтому перед ним ставится запятая. «345678» кратно 3, но после него стоит «9», поэтому запятая здесь не ставится. И так далее. «\ B» не позволяет регулярному выражению ставить запятую в начале строки.

@ neu-rah упомянул, что эта функция добавляет запятые в нежелательных местах, если после десятичной точки больше трех цифр. Если это проблема, вы можете использовать эту функцию:

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}
2587
ответ дан 22 November 2019 в 20:13
поделиться

А общая быстрая функция , который будет реагировать хорошо:

  • , Если значение является числом или строкой
  • , Если число не имеет английской цифры
  • , Если число имеет десятичное число или не
  • [Дополнительный] Если НЕ sticked сзади, но sticked от конца как: 50000 кг
  • , Если некоторые нумеруют разделенный в строке

А уменьшенная функция для быстрого, безопасного и низкого веса с:

function sepNum(r,e){return e=e||",",r=String(r).replace(/[\u0660-\u0669\u06f0-\u06f9]/g,function(r){return 15&r.charCodeAt(0)}).replace(/(?:[^\.]|^)\b(\d+)/g,function(r){return r=r.replace(/\B(?=(\d{3})+\b)/g,e)})}

Text='1000000 and .0002 5000.1234 with 500000Kg but not V10012.231';
console.log(sepNum(Text));

+ Объясните:

function thousandSeparatorAllNonDecimal (x,sep) { 
        if(!sep) sep=','; //seprator by defualt is comma but can be changed
    x=String(x) // Making Sure the X is String, because RegEx will work just with strings
  .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, // [Optional] RegEx for Finding all non English Digit (like ["١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩", "٠"]
  function (c) { return c.charCodeAt(0) & 0xf; }) // return of the function of the Regex => Replacing all with the same Englsih Digit (possible some android keyboards just type non english digit)
  .replace(/(?:[^\.]|^)\b(\d+)/g, // Finding all numbers that are not started by dot by the RegEx :
  // 0) (?:) : any that
  // 1) [^\.] : not same to dot
  // 2) |^ or any thing else that
  // 3) \b : not sticked to any word from behind [Optional] (it can have another \b in end to check if not sticked from front to any word too, or no any \b too, but we want it take some numbers like 50000Kg)
  // +5) 
  function(x){ // Process them one by one separated, by this function
  x=x.replace(/\B(?=(\d{3})+\b)/g, // Now by this RegEx replacing any 3 by 3 digit
  sep); // now using separator in the RegEx replace
  return x;} // now return the result to main function
  );return x // and returning the main result out
}

И самый быстрый regex может быть ТОЛЬКО и для Недесятичного числа и для десятичных чисел:

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

, Но я думаю все еще, как @uKolka сказал, верная мысль для единственного значения, с некоторым добавлением префикса [Дополнительный: parseFloat] и снабжающий постфиксом [Дополнительный: Замена '.00']:

Num=parseFloat(Num).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2,useGrouping:true}).replace('.00','');

как полный пример здесь: https://jsfiddle.net/PAPIONbit/198xL3te /

0
ответ дан MMMahdy-PAPION 4 October 2019 в 07:33
поделиться

Можно также использовать Intl. Конструктор NumberFormat . Вот то, как можно сделать это.

 resultNumber = new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(yourNumber); 
9
ответ дан 22 November 2019 в 20:13
поделиться

Мой ответ является единственным ответом, который полностью заменяет 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 в любое время это, я могу поймать его не поддержка современных стандартов.

помните, что чрезмерную похвалу, в разделе комментария, рассматривают вне темы. Вместо этого просто забросьте меня с-голосами.

,''); }

, Если Вы не контакт с деньгами и имеете переменные десятичные требования форматирования, вот более универсальная функция:

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 в любое время это, я могу поймать его не поддержка современных стандартов.

помните, что чрезмерную похвалу, в разделе комментария, рассматривают вне темы. Вместо этого просто забросьте меня с-голосами.

4
ответ дан 22 November 2019 в 20:13
поделиться

Я вполне впечатлен количеством, отвечает на этот вопрос, имеет. Мне нравится ответ [1 110] uKolka:

n.toLocaleString()

, Но к сожалению, в некоторых локалях как испанский язык, это не работает (по моему скромному мнению), как ожидалось на числа ниже 10,000:

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

Дает 1000 а не 1.000.

См. toLocaleString, не работающий над числами меньше чем 10 000 во всех браузерах для знания почему.

, Таким образом, я должен был использовать ответ [1 111] Elias Zamaria выбор права тысячи символа разделителя:

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

Эти работы хорошо как острота для обеих локалей, которые используют , или . как тысячи разделителя и начинают работать от 1 000 во всех случаях.

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

Дает 1.000 с испанским контекстом локали.

3
ответ дан 22 November 2019 в 20:13
поделиться

Я предлагаю использовать 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);
}

ОБНОВЛЕНИЕ 13.02.14

Люди сообщают, что это не работает должным образом, поэтому я сделал JS Fiddle , который включает автоматические тесты.

Обновление 26/11/2017

Вот эта скрипка в виде фрагмента стека с немного измененным выводом:

 function number_format (number, decimals, dec_point ,ousand_sep) {// http://kevin.vanzonneveld.net // + оригинал: Jonas Raoni Soares Silva (http://www.jsfromhell.com) // + улучшен: Kevin van Zonneveld (http: // kevin.vanzonneveld.net) // + исправление: Michael White (http://getsprink.com) // + исправление: Benjamin Lupton // + исправление: Allan Jensen (http://www.winternet.no) // + отредактировал: Jonas Raoni Soares Silva (http://www.jsfromhell.com) // + исправил ошибку: Howard Yeend // + отредактировал: Luke Smith (http://lucassmith.name) // + исправил ошибку: Diogo Resende // + исправлено: Rival // + введено: Kheang Hok Chin (http://www.distantia.ca/) // + улучшено: davook // + улучшено: Brett Zamir (http: // brett-zamir.me) // + предоставлено: Jay Klehr // + улучшено: Brett Zamir (http://brett-zamir.me) // + предоставлено: Amir Habibi (http: //www.residence- mixte.com/) // + исправлено: Brett Zamir (http://brett-zamir.me) // + улучшено: Theriault // + улучшено: Drew Noakes // * пример 1: number_format (1234.56); // * возвращает 1: '1,235' // * пример 2: number_format (1234.56, 2, ',', ''); // * возвращает 2: '1 234,56' // * пример 3: number_format (1234.5678, 2, '.', ''); // * возвращает 3: '1234.57' // * пример 4: number_format (67, 2, ',', '.'); // * возвращает 4: '67, 00 '// * пример 5: number_format (1000); // * возвращает 5: '1000' // * пример 6: number_format (67.311, 2); // * возвращает 6: '67 .31 '// * пример 7: number_format (1000.55, 1); // * возвращает 7: '1,000.6' // * пример 8: number_format (67000, 5, ',', '.'); // * возвращает 8: '67 .000,00000 '// * пример 9: number_format (0.9, 0); // * возвращает 9: '1' // * пример 10: number_format ('1.20', 2); // * возвращает 10: '1.20' // * пример 11: number_format ('1.20', 4); // * возвращает 11: '1.2000' // * пример 12: number_format ('1.2000', 3); // * возвращает 12: '1.200 'var n =! IsFinite (+ число)? 0: + число, Prec =! IsFinite (+ десятичные дроби)? 0: Math.abs (десятичные числа), sep = (typeofousand_sep === 'undefined')? ',' :ousand_sep, dec = (typeof dec_point === 'undefined')? '.' : dec_point, toFixedFix = function (n, prec) {// Исправление для IE parseFloat (0.55) .toFixed (0) = 0; var k = Math.pow (10, прецизионный); вернуть Math.round (n * k) / k; }, s = (пре? toFixedFix (п, пре): Math.round (п)). toString (). split ('.'); if (s [0] .length> 3) {s [0] = s [0] .replace (/ \ B (? = (?: \ d {3}) + (?! \ d)) / g, сеп); } if ((s [1] || '') .length ' + (фактическое === ожидалось? 'Пройдено': 'НЕИСПРАВНО') + ', получено "' + фактическое + '", ожидалось "' + ожидалось + '".'); exampleNumber ++; } test ('1,235', 1234,56); test ('1 234,56', 1234.56, 2, ',', ''); test ('1234.57', 1234.5678, 2, '.', ''); тест ('67, 00 ', 67, 2,', ','. '); тест ('1,000', 1000); тест ('67 .31 ', 67.311, 2); тест ('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 {максимальная высота: 100%! Важно; } 
104
ответ дан 22 November 2019 в 20:13
поделиться

Для любого то, кому нравятся 1 лайнер и единственный regex, но , не делает , хотят использовать разделение (), вот расширенная версия regex из других ответов, который дескрипторы (игнорирует) десятичные разряды:

    var formatted = (x+'').replace(/(\..*)$|(\d)(?=(\d{3})+(?!\d))/g, (digit, fract) => fract || digit + ',');

regex сначала соответствия подстрока, запускающаяся с литерала "." и замен это с собой ("fract"), и затем соответствия любая цифра, сопровождаемая кратными числами 3 цифр и, помещает"", после него.

, Например, x = 12345678.12345678 даст , отформатировал = '12,345,678.12345678'.

0
ответ дан 22 November 2019 в 20:13
поделиться

Я думаю, что ваше решение - одно из самых коротких, которые я видел для этого. Я не думаю, что есть какие-то стандартные функции JavaScript для такого рода вещей, так что вы, вероятно, сами по себе.

Я проверил спецификации CSS 3, чтобы узнать, возможно ли это сделать в CSS, но если вы не хотите, чтобы каждая цифра была отдельной , я не думаю, что это возможно.

Я нашел один проект в Google Code , который выглядел многообещающим: flexible-js-formatting . Я не использовал его, но он выглядит довольно гибким и имеет модульные тесты с использованием JsUnit .У разработчика также есть много сообщений (правда, старых) на эту тему.

Обязательно учитывайте международных пользователей: многие страны используют пробел в качестве разделителя и используют запятую для отделения десятичной части от целой части числа.

2
ответ дан 22 November 2019 в 20:13
поделиться
Другие вопросы по тегам:

Похожие вопросы: