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

Я пытаюсь напечатать целое число в JavaScript с запятыми в качестве разделителей тысяч. Например, я хочу, чтобы число 1234567 отображалось как «1,234,567». Как бы я это сделал?

Вот как я это делаю:

  function numberWithCommas (x) {x = x.toString ();  var pattern =/(-?  d +) ( d {3})/;  while (pattern.test (x)) x = x.replace (шаблон, «$ 1, $ 2»);  return x;}  

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


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

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

  номер функцииWithCommas (x) {return x.toString (). replace (/ B (?  "} $ {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»); отказы + =! test (100000, «100000»); отказы + =! test (1000000, «1000000»); отказы + =! test (10000000, «10,000,000»);  if (сбои) {console.log (`$ {failures} test (s) failed`);} else {console.log (" Все тесты пройдены ");}  
   .as-console-wrapper {max-height: 100%! important;}  


Регулярное выражение использует 2 утверждения упреждающего просмотра:

  • положительное для поиска любой точки в строке, которая имеет значение, кратное 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 упомянул, что эта функция добавляет запятые в нежелательных местах, если есть должно быть больше 3 цифр после десятичной точки. Если это проблема, вы можете использовать эту функцию:

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

  функция numberWithCommas  (x) {var parts = x.toString (). split (".");  parts [0] = parts [0] .replace (/ B (? = ( d {3}) + (?!  d))/g, ",");  return parts.join (".");} функция test (x, expect) {const result = numberWithCommas (x);  const pass = результат === ожидать;  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»); сбои + =! test (1000, «1000»); сбои + =! test (1000.123456, «1,000.123456»); сбои + =! test (10000, «10,000»);  сбои + =! test (10000.123456, "10,000.123456"); сбои + =! test (100000, "100000"); сбои + =! test (100000.123456, "100000.123456"); сбои + =! test (1000000, "1,000,000"  ); сбои + =! test (1000000.123456, «1,000,000,123456»); сбои + =! test (10000000, «10,000,000»); сбои + =! test (10000000.123456, «10,000,000,123456»); if (сбои) {console.log (  `$ {failures} test (s) failed`);} else {console.log (" Все тесты пройдены ");}  
  .as-console  -wrapper {max-height: 100%! important;}  

@tjcrowder указал, что теперь, когда JavaScript имеет ретроспективный просмотр (информация о поддержке), ее можно решить в самом регулярном выражении:

  номер функции  rWithCommas (x) {return x.toString (). replace (/ B (?  

  function numberWithCommas (x) {return x.  toString (). replace (/ B (?  "} $ {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»); сбои + =! test (1000, «1000»); сбои + =! test (1000.123456, «1,000.123456»); сбои + =! test (10000, «10,000»);  сбои + =! test (10000.123456, "10,000.123456"); сбои + =! test (100000, "100000"); сбои + =! test (100000.123456, "100000. 123456 "); сбои + =! Test (1000000,« 1000000 »); сбои + =! Test (1000000.123456,« 1000000.123456 »); сбои + =! Test (10000000,« 10,000,000 »); сбои + =! Test (10000000.123456  , «10,000,000.123456»); if (failures) {console.log (`$ {failures} test (s) failed`);} else {console.log (« Все тесты пройдены »);}  
  .as-console-wrapper {max-height: 100%! important;}  

(? - это отрицательный просмотр назад, в котором говорится, что совпадению не может предшествовать . , за которым следует ноль или более цифр. Отрицательный просмотр назад выполняется быстрее, чем решение split и join (сравнение), по крайней мере, в V8.


Я удивлен, что никто не упомянул Number.prototype.toLocaleString. Он реализован в JavaScript 1.5 (который был представлен в 1999 году), поэтому в основном поддерживается во всех основных браузерах.

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

Это также o работает в Node.js начиная с v0.12 посредством включения Intl

Просто обратите внимание, что эта функция возвращает строку, а не число.

Если хотите что-то другое, Numeral.js может быть интересным.

23


Ниже представлены два разных API браузера, которые могут преобразовывать числа в структурированные строки . Имейте в виду, что не все компьютеры пользователей имеют языковой стандарт , в котором в числах используются запятые. Чтобы принудительно использовать запятые для вывода, можно использовать любой «западный» языковой стандарт , например en-US

  номер переменной = 1234567890; //Пример числа для преобразования  

⚠️ Помните, что javascript имеет максимальное целочисленное значение 9007199254740991


toLocaleString

 //поведение по умолчанию на машине с локальным компьютером, который использует запятые для чиселnumber.toLocaleString (); //"1,234,567,890"//С пользовательскими настройками, принудительное использование локали «США» для обеспечения запятых в выходных данных var number2 = 1234.56789; //examplenumber с плавающей запятой2.toLocaleString ('en-US', {maximumFractionDigits: 2})//"1,234,57"  

NumberFormat

  var nf = new Intl.NumberFormat (); nf.format (число); //"1,234,567,890"  

Из того, что я проверил (по крайней мере, Firefox), они оба более или менее одинаковы по производительности.

Живая демонстрация: https://codepen.io/vsync/pen/MWjdbgL?editors=1000

10


Я предлагаю использовать phpjs.org number_format ()

  функцию 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  

ОБНОВЛЕНИЕ 13.02.14

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

Обновление от 26.11.2017

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

  формат_числа (число, десятичные знаки, десятичная_точка, тысяча_шек) {//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  : формат_числа (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, '.', '')  ; 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;}  

8


Это вариант ответа @ mikez302, но измененный для поддержки чисел с десятичными знаками (согласно обратной связи @ neu-rah, что numberWithCommas (12345.6789) -> «12,345.6 , 789 «вместо» 12,345.6789 «

  function numberWithCommas (n) {var parts = n.toString (). Split (". "); Return parts [0].  заменить (/ B (? = ( d {3}) + (?!  d))/g, ",") + (parts [1]? "." + parts [1]: "");  }  

1


  function formatNumber (num) {return num.toString (). replace (/(   d) (? = ( d {3}) + (?!  d))/g, "$ 1,")} print (formatNumber (2665)); //2,665print (formatNumber (102665)); //102,665print (formatNumber (111102665)); //111,102,665  

5


Использование регулярного выражения

  function toCommas (value) {return value.toString (). Replace (/ B (? = ( D {3}) +  (?!  d))/g, ",");} console.log (toCommas (123456789)); //123,456,789console.log (toCommas (1234567890)); //1,234,567,890console.log (toCommas (1234)); //1,234  

Использование toLocaleString ()

  var number = 123456.789;// запросить валюту formatconsole.log (число. toLocaleString ('de-DE', {style: 'currency', currency: 'EUR'}));//→ 123.456,79 €//японская иена не использует второстепенный unitconsole.log (number.toLocaleString (  'ja-JP', {style: 'currency', currency: 'JPY'}))//→ ¥ 123 457//ограничение до трех значащих цифрconsole.log (number.toLocaleString ('en-IN', {maximumSignificantDigits: 3  }));//→ 1,23,000  

ref MDN: Number.prototype.toLocaleString ()

Использование Intl. NumberFormat ()

  var number = 123456.789; console.log (новый Intl.NumberFormat ('de-DE', {style: 'currency', currency:  'EUR'}). Format (number));//ожидаемый результат: "123.456,79 €"//японская иена не использует второстепенный unitconsole.log (new Intl.NumberFormat ('ja-JP', {  style: 'currency', currency: 'JPY'}). format (number));//ожидаемый результат: «¥ 123,457»//ограничение до трех значащих цифрconsole.log (new Intl.NumberFormat ('en-IN',  {maximumSignificantDigits: 3}). format (number));//ожидаемый результат: "1,23,000"  

ref Intl.Number Формат

ДЕМО ЗДЕСЬ

   //Использование функции регулярного выражения toCommas (value) {return value.toString (). replace (/ B (? = ( d {3}) + (  ?!  d))/g, ",");  } функция запятые () {var num1 = document.myform.number1.value; //Использование регулярного выражения document.getElementById ('result1'). Value = toCommas (parseInt (num1)); //Использование toLocaleString () document.getElementById ('result2'). Value = parseInt (num1) .toLocaleString ('ja-JP', {style: 'currency', currency: 'JPY'}); //Использование Intl.NumberFormat () document.getElementById ('result3'). Value = new Intl.NumberFormat ('ja-JP', {style: 'currency', currency: 'JPY'}). Format (num1);  }    

Использование регулярного выражения

Использование toLocaleString ()

Использование Intl.NumberFormat ()

Производительность

http://jsben.ch/sifRd

2


Intl.NumberFormat

Собственная функция JS. Поддерживается IE11, Edge, последней версией Safari, Chrome, Firefox, Opera, Safari для iOS и Chrome для Android.

  var number = 3500; console.log (новый Intl.NumberFormat  () .format (number));//→ '3500', если используется английский язык (США)  

1


Спасибо всем за их ответы. Я построил на некоторых ответах, чтобы сделать более универсальное решение.

Первый фрагмент кода добавляет функцию, которая имитирует PHP number_format () к прототипу Number. Если я форматирую число, мне обычно нужны десятичные разряды, поэтому функция принимает количество отображаемых десятичных знаков. В некоторых странах в качестве десятичного разделителя используются запятые, а в качестве разделителя тысяч — десятичные дроби, поэтому функция позволяет устанавливать эти разделители.

  Number.prototype.numberFormat = function (decimals, dec_point, sizes_sep  ) {dec_point = typeof dec_point! == 'undefined'?  dec_point: '.';  тысяч_sep = typeofousand_sep! == 'undefined'?  тысяч_sep: ',';  var parts = this.toFixed (десятичные дроби) .split ('.');  parts [0] = parts [0] .replace (/ B (? = ( d {3}) + (?!  d))/g ,ousand_sep);  return parts.join (dec_point);}  

Вы должны использовать это следующим образом:

  var foo = 5000; console.  журнал (foo.numberFormat (2)); //формат использования: 5,000.00console.log (foo.numberFormat (2, ',', '.')); //европейский формат: 5.000,00  

Я обнаружил, что мне часто нужно было вернуть число для математических операций, но parseFloat преобразует 5000 в 5, просто взяв первую последовательность целых чисел значения. Итак, я создал свою собственную функцию преобразования чисел с плавающей запятой и добавил ее к прототипу String.

  String.prototype.getFloat = function (dec_point ,ousand_sep) {dec_point = typeof dec_point! ==  'неопределенный' ?  dec_point: '.';  тысяч_sep = typeofousand_sep! == 'undefined'?  тысяч_sep: ',';  var parts = this.split (dec_point);  var re = new RegExp ("[" +ousand_sep + "]");  части [0] = части [0]. заменить (повторно, '');  return parseFloat (parts.join (dec_point));}  

Теперь вы можете использовать обе функции следующим образом:

  var foo  = 5000; var fooString = foo.numberFormat (2); //Строка 5,000.00 var fooFloat = fooString.getFloat (); //Число 5000; console.log ((fooString.getFloat () + 1) .numberFormat (2)); //Строка 5 001,00  

7


Я очень впечатлен количеством ответов на этот вопрос. Мне нравится ответ 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.567let decimals = 2let decpoint = '.' //Или Number (0.1) .toLocaleString (). Substring (1, 2) let тысяча = ','//Или 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  

Дает 1,234,57 .

Для этого не нужен регулярное выражение. Он работает путем корректировки числа до желаемого количества десятичных знаков с помощью toFixed , а затем деления его вокруг десятичной точки . , если она есть. Затем левая часть превращается в массив цифр, который переворачивается. Затем через каждые три цифры с начала добавляется разделитель тысяч, и результат снова меняется на противоположный. Конечный результат — объединение двух частей. Знак введенного числа сначала удаляется с помощью Math.abs , а затем возвращается, если необходимо.

Это не однострочный текст, но не намного длиннее и легко превращается в функцию. Переменные были добавлены для ясности, но они могут быть заменены желаемыми значениями, если они известны заранее. Вы можете использовать выражения, которые используют toLocaleString как способ найти правильные символы для десятичной точки и разделителя тысяч для текущего языкового стандарта (имейте в виду, что для них требуется более современный Javascript. )

0


Я думаю это самое короткое регулярное выражение, которое это делает:

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

Я проверил это по нескольким числам, и это сработало.

3


Number.prototype.toLocaleString () было бы замечательно, если бы он изначально предоставлялся всеми браузерами (Safari) .

Я проверил все остальные ответы, но никто не заполнил их. Вот подсказка к этому, которая на самом деле представляет собой комбинацию первых двух ответов; если toLocaleString работает, он использует его, если нет — использует пользовательскую функцию.

  var putThousandsSeparators; putThousandsSeparators = function (value, sep) {if (sep == null) {sep = ',';  }//проверяем, нужно ли форматирование if (value.toString () === value.toLocaleString ()) {//разделяем десятичные дроби var parts = value.toString (). split ('.')//форматируем части целых чисел  [0] = части [0] .replace (/ B (? = ( D {3}) + (?!  D))/g, sep); //собрать их вместе value = parts [1]?  parts.join ('.'): parts [0];  } еще {значение = значение.toLocaleString ();  } возвращаемое значение;}; alert (putThousandsSeparators (1234567.890));  

4


Вы можете использовать эту процедуру для форматирования необходимой валюты.

  var  nf = новый 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- валюта-в-javascript/

1


Разделитель тысяч может быть вставлен в соответствии с международными стандартами с помощью объекта браузера Intl :

  Intl.NumberFormat ().  format (1234);//возвращает «1,234», если локаль пользователя en_US, например  

Подробнее см. статью MDN о NumberFormat, вы можете указать поведение локали или значение по умолчанию для пользователя. Это немного более надежно, поскольку учитывает местные различия; во многих странах для разделения цифр используются точки, в то время как запятая обозначает десятичные дроби.

Intl.NumberFormat пока доступен не во всех браузерах, но работает в последних версиях Chrome, Opera и IE. Следующий выпуск Firefox должен его поддерживать. У Webkit, похоже, нет графика для реализации.

4


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

 //Использование по умолчанию: Accounting.formatMoney (12345678); //$ 12 345 678,00//Европейское форматирование (пользовательский символ и разделители), также можно использовать объект параметров в качестве второго параметра: Accounting.formatMoney (4999.99, "€", 2, ".", ","); //4,999,99 евро//Отрицательные значения тоже красиво отформатированы: Accounting.formatMoney (-500000, "£", 0); //£ -500,000//Простая строка `format` позволяет управлять положением символа [% v = value,% s = symbol]: Accounting.formatMoney (5318008, {symbol:" GBP ", format:"% v% s "  }); //5 318 008,00 фунтов стерлингов  

1


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

  function commafy (num) {var parts = ('' + (num  

Показывает многообещающую производительность: http://jsperf.com/number-formatting-with-commas/5

2015.4.26: Незначительное исправление для решения проблемы, когда num

3


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

 /** * Форматирует число как строку с запятыми, разделяющими тысячи.  * @param num - Число, которое нужно отформатировать (например, 10000) * @return Строка, представляющая форматированное число (например, «10 000») */var formatNumber = function (num) {var array = num.toString (). split (  '');  var index = -3;  в то время как (длина массива + индекс> 0) {массив.splice (индекс, 0, ','); //Уменьшаем на 4, так как мы только что добавили в массив еще одну единицу.  индекс - = 4;  } return array.join ('');};  

Ссылка на CodeSandbox с примерами: https://codesandbox.io/s/p38k63w0vq

2


Используйте этот код для обработки формата валюты для Индии. Код страны можно изменить для обработки валюты другой страны.

  let amount = 350256.95var formatter = new Intl.NumberFormat ('en-IN', {minimumFractionDigits: 2,})  ;//Используем it.formatter.format (amount);  

output:

  3,50,256.95  

2


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

  resultNumber = new Intl. NumberFormat ('en-IN', {maximumSignificantDigits: 3}). Формат (yourNumber);   

1


Мой ответ — единственный ответ, который полностью заменяет jQuery гораздо более разумной альтернативой:

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

Это решение не только добавляет запятые, но и округляет до ближайшего пенни в случае ввода на сумму вроде (1000,9999) вы получите 1001,00 долларов США. Кроме того, вводимое вами значение может быть числом или строкой; это не имеет значения.

Если вы имеете дело с деньгами, но не хотите, чтобы перед суммой отображался знак доллара, вы также можете добавить эту функцию, которая использует предыдущую функцию, но удаляет функцию $ :

  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 каждый раз, когда могу поймать, что он не поддерживает современные стандарты.

Помните, что чрезмерная похвала в разделе комментариев считается не по теме. Вместо этого просто засыпайте меня голосами за.

2


Я написал это до того, как наткнулся на этот пост. Нет регулярного выражения, и вы действительно можете понять код.

  $ (function () {function  insertCommas (s) {//получаем материал перед точкой var d = s.indexOf ('.'); var s2 = d === -1? s: s.slice (0, d);//вставляем запятые каждые  3 цифры справа для (var i = s2.length - 3; i> 0; i - = 3) s2 = s2.slice (0, i) + ',' + s2.slice (i);//добавляем  дробная часть if (d! == -1) s2 + = s.slice (d); return s2;} $ ('# theDudeAbides'). text (insertCommas ('1234567.89012'));});   
    

1


  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»

Ура!

2


Позвольте мне попробовать улучшить ответ uKolka и, возможно, помочь другим сэкономить время.

Используйте Numeral.js.

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

Вы должны использовать Number.prototype.toLocaleString () только в том случае, если совместимость с его браузером не является проблемой.

1


Альтернативный способ, поддерживающий десятичные дроби, различные разделители и минусы.

  var number_format = function (number, decimal_pos, decimal_sep, тысяча_sep) {var ts = (тысяча_sep == null?  ',': тысяча_sep), ds = (decimal_sep == null? '.': decimal_sep), dp = (decimal_pos == null? 2: decimal_pos), n = Math.floor (Math.abs (число)). toString  (), i = n.length% 3, f = ((число  0) f + = ds + parseFloat (number) .toFixed (dp) .split ('.') [1] return f;}  

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

6


Думаю, эта функция позаботится обо всех проблемах, связанных с этой проблемой.

  function commaFormat (inputString) {inputString = inputString  .нанизывать();  var decimalPart = "";  if (inputString.indexOf ('.')! = -1) {//предупреждение ("десятичное число");  inputString = inputString.split (".");  decimalPart = ". "+ inputString [1]; inputString = inputString [0];//предупреждение (inputString);//предупреждение (decimalPart);} var outputString =" "; var count = 0; for (var i = inputString.length - 1  ; i> = 0 && inputString.charAt (i)! = '-'; i--) {//alert ("внутри для" + inputString.charAt (i) + "and count =" + count + "и outputString  = "+ outputString); if (count == 3) {outputString + =", "; count = 0;} outputString + = inputString.charAt (i); count ++;} if (inputString.charAt (0) == '  - ') {outputString + = "-";}//предупреждение (outputString);//alert(outputString.split (""). reverse (). join ("")); return outputString.split ("")  .reverse (). join ("") + decimalPart;}  


Только для будущих гуглеров (или не обязательно «гуглеров»):

Все решения, упомянутые выше, прекрасны, однако RegExp может быть ужасным плохо использовать в такой ситуации.

Итак, да, ты мил ght используйте некоторые из предложенных вариантов или даже напишите что-нибудь примитивное, но полезное, например:

  const strToNum = str => {//Найдите 1-3 цифры, за которыми следуют ровно 3 цифры &  запятая или конец строки let regx =/( d {1,3}) ( d {3} (?:, | $))/;  let currStr;  do {currStr = (currStr || str.split (`.`) [0]) .replace (regx,` $ 1, $ 2`)} while (currStr.match (regx))//Остановить, если нет совпадений и нулей  вернул return (str.split (`.`) [1])?  currStr.concat (`.`, str.split (` .`) [1]): currStr;}; strToNum (`123`)//=> 123strToNum (` 123456`)//=> 123,456strToNum (`-  1234567.0987`)//=> -1,234,567.0987  

Регулярное выражение, которое здесь используется, довольно простое, и цикл будет выполняться ровно столько раз, сколько потребуется для выполнения работы.

И вы могли бы оптимизировать его намного лучше, «DRYify» код и так далее.

Тем не менее,

  (-  1234567.0987) .toLocaleString ();  

(в большинстве ситуаций) было бы гораздо лучшим выбором.

Дело не в скорости выполнения или в кросс-браузерной совместимости.

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

Этот метод в соответствии с документацией ECMAScript был представлен в 1999 году, и я считаю, что причиной этого была надежда, что Интернет в какой-то момент подключится люди все вокруг и мир, поэтому потребовались некоторые инструменты «интернализации».

Сегодня Интернет связывает всех нас, поэтому важно помнить, что мир намного сложнее, чем мы могли бы представьте & что (/почти) все мы здесь , в Интернете.

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

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

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

  new Date ();  

возвращает d ata согласно часам конечного пользователя.

2


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

  var formatted = (x + ''). replace (/(..*)$ | ( d) (? = ( d {  3}) + (?!  D))/g, (цифра, фракт) => фракт ||  digit + ',');  

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

Например, , x = 12345678.12345678 даст formatted = ’12, 345,678.12345678 ‘.


Если вы ищете короткое и приятное решение:

  const number = 12345678.99; const numberString  = Строка (число) .replace (/^  d +/, число => [... число] .map ((цифра, индекс, цифры) => (! Index || (digits.length - индекс)% 3?  '': ',') + digit) .join (''));//numberString: 12 345 678,99  

4


Я добавил tofixed к решению Aki143S . В этом решении используются точки для разделителей тысяч и запятая для точности.

   функция formatNumber (число, фиксированное) {var decimalPart;  var array = Math.floor (число) .toString (). split ('');  var index = -3;  в то время как (длина массива + индекс> 0) {массив.splice (индекс, 0, '.');  индекс - = 4;  } if (фиксированный> 0) {decimalPart = num.toFixed (фиксированный). разделить (".") [1];  вернуть array.join ('') + "," + decimalPart;  } вернуть array.join ('');  };  

Примеры;

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


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

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

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

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

1



Пожалуйста, дайте нам быструю кнопку запятой

Follow

Можем ли мы, ПОЖАЛУЙСТА, иметь возможность заменить ключ emojii запятой? Или, по крайней мере, проведем вправо по файлу. ключ, чтобы он был вместо #?

Я недавно перешел с Android и постепенно схожу с ума, тем более что я пишу на немецком языке с большим количеством запятых.

Я понимаю, что таким образом она ближе к оригинальной клавиатуре iOS, но кого волнует оригинал.

Спасибо!

Оцените статью
clickpad.ru
Добавить комментарий