Форматирование чисел JQuery

Слишком много вопросов и ответов об этой базовой функциональности, я не вижу леса за деревьями.

В Java есть только один простой ответ (java.text.NumberFormat и его подклассы), поэтому я уверен, что большинство плагинов, вопросов и ответов со временем станут стандартом де-факто для JQuery.

Этот плагин — лучший из тех, что я нашел на данный момент, но я не знаю, разрабатывается ли он еще, является ли он зрелым и т. д.

http://plugins.jquery.com/project/numberformatter

Есть ли лучшее решение? Достаточно ли он зрел/активен, чтобы на него можно было положиться?


Изменить:

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

e.g.

Отформатируйте 1000 в $1,000 или 1,000.00 и т. д. (хорошая поддержка локали)

Кажется, что http://plugins.jquery.com/project/numberformatter выполняет эту работу, но вопрос было: «Правильно ли я использую?» или "Есть ли лучший способ сделать это?"


person Eran Medan    schedule 06.09.2011    source источник
comment
Это прикол или вопрос?   -  person alex    schedule 07.09.2011
comment
для записи Java и Javascript — две совершенно разные вещи. Не совсем справедливо ругать js или jQuery за то, что у них нет функции java: P   -  person Joseph Marikle    schedule 07.09.2011
comment
@alex - вопрос, разглагольствования - побочный эффект, извините   -  person Eran Medan    schedule 07.09.2011
comment
@Джозеф - я привык находить решение для всего, что связано с JQuery, я избаловался ...   -  person Eran Medan    schedule 07.09.2011
comment
Более разумным вопросом было бы указать ваши требования к форматированию, чтобы можно было сделать предложения о том, как лучше всего их выполнить. Загрузка библиотеки и соответствующего плагина просто для того, чтобы получить форматирование за деньги, например, является излишним, когда функция из двух или трех строк сделает эту работу. С другой стороны, если вы ищете что-то, что будет делать все, то, вероятно, вы не потратили достаточно времени на определение своих требований.   -  person RobG    schedule 07.09.2011
comment
AutoNumeric делает свое дело: decorplanit.com/plugin   -  person Luftwaffle    schedule 07.06.2016
comment
Неработающей ссылке. Не могли бы вы обновить.   -  person Iren Saltalı    schedule 12.12.2017


Ответы (8)


Я бы порекомендовал посмотреть эту статью о том, как использовать javascript для обработки базового форматирования:

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

источник: http://www.mredkj.com/javascript/numberFormat.html

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

Когда вы когда-либо используете jQuery, вы должны сделать шаг назад и спросить, достаточно ли он вносит, чтобы оправдать дополнительные накладные расходы на загрузку библиотеки.

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

Примечание: проверьте это, если хотите посмеяться над чрезмерным использованием jQuery.

person Abe Miessler    schedule 06.09.2011
comment
Я сделал плагин jQuery с этим кодом. Теперь его легко применить к нескольким местам на странице: $('.number').formatNumber();. По умолчанию используется преобразование 1343034,09 в 1 343 034,09 — github.com/RaphaelDDL/jquery.formatNumber. - person RaphaelDDL; 12.06.2012
comment
Абэ, ссылка, которую вы предоставляете, чрезвычайно полезна. Возможно, вы могли бы отредактировать свой ответ и добавить сюда основные функции на случай, если он исчезнет? Вам уже отдали должное. - person Perry Tew; 12.08.2016
comment
Неплохая идея @PerryTew - добавлено - person Abe Miessler; 12.08.2016
comment
старый ответ, но работает из коробки, просто скопируйте и вставьте, отлично !!! - person David; 10.07.2021

Используя подключаемый модуль jQuery Number Format, вы можете получить отформатированное число в одним из трех способов:

// Return as a string
$.number( 1234.5678, 2 ); // Returns '1,234.57'

// Place formatted number directly in an element:
$('#mynum').number( 1234.5678 ); // #mynum would then contain '1,235'

// Replace existing number values in any element
$('span.num').number( true, 2 ); // Formats and replaces existing numbers in those elements.

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

.число(число, десятичные разряды, десятичный разделитель, разделитель тысяч)

Вы также можете получить формат чисел jQuery из GitHub.

person Quadrant6    schedule 28.10.2012
comment
Включение внешней ссылки на хорошо задокументированный источник приветствуется здесь, в Stack Overflow, но важно включить в свой ответ наиболее важные / релевантные фрагменты из внешнего источника и дать контекст относительно того, как ответить на вопрос. - person recursion.ninja; 29.10.2012
comment
Я использовал этот плагин некоторое время, и он не пригоден для использования. Когда вы печатаете, вы шьете, как значения форматируются с задержкой. Курсор прыгает, поэтому, если вы вводите поле, и у вас есть 0 в нем, вы выбрали его и начинаете вводить 220, курсор прыгает, и вы получаете 202 и т. Д. Очень плохо, если вы хотите делать профессиональные страницы. - person Pavel Jiri Strnad; 20.03.2015

Разработка браузера продолжается:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

 Number.toLocaleString(locale);

 // E.g.
 parseFloat("1234567.891").toLocaleString(window.document.documentElement.lang);
 "1,234,567.891"
person elixon    schedule 27.08.2018
comment
Это не работает для испанских языков и числа ‹ 10 000. - person jstuardo; 09.06.2020
comment
У меня работает: parseFloat("1234.891").toLocaleString('es-ES'); выводит "1234,891". Это кажется правильным, поскольку для es-ES разрешены как точка, так и ее отсутствие. Если вам требуется '.' затем используйте локаль ca-ES, в которой она есть. - person elixon; 10.06.2020
comment
Именно об этом я и говорил. Разделитель тысяч не работает для чисел меньше 10 000 в испанских локалях, но неважно, я создал метод расширения jquery только с одной строкой кода, чтобы отформатировать целое число с разделителем тысяч, не беспокоясь об установке конкретной культуры. - person jstuardo; 10.06.2020

Я написал JavaScript-аналог PHP-функции number_format на основе < strong>Abe Miessler addCommas. Может быть полезно.

number_format = function (number, decimals, dec_point, thousands_sep) {
        number = number.toFixed(decimals);

        var nstr = number.toString();
        nstr += '';
        x = nstr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? dec_point + x[1] : '';
        var rgx = /(\d+)(\d{3})/;

        while (rgx.test(x1))
            x1 = x1.replace(rgx, '$1' + thousands_sep + '$2');

        return x1 + x2;
    }

Например:

var some_number = number_format(42661.55556, 2, ',', ' '); //gives 42 661,56
person slashka    schedule 23.07.2018

Если вам нужно работать с несколькими валютами, различными числовыми форматами и т. д., я могу порекомендовать autoNumeric. Работает удовольствие. Успешно пользуемся уже несколько лет.

person Luftwaffle    schedule 07.06.2016

http://jquerypriceformat.com/#examples

https://github.com/flaviosilveira/Jquery-Price-Format

html-ввод для живого шанса.

<input type="text" name="v7"  class="priceformat"/>
<input type="text" name="v8"  class="priceformat"/>


$('.priceformat').each(function( index ) {
    $(this).priceFormat({ prefix: '',  thousandsSeparator: '' });
});

//5000.00

//5.000,00

//5,000.00

person Limitless isa    schedule 22.10.2014

Поместив это http://www.mredkj.com/javascript/numberFormat.html и $('.number').formatNumber(); концепции вместе, вы можете использовать следующую строку кода;

например <td class="number">1172907.50</td> будет отформатирован как <td class="number">1,172,907.50</td>

$('.number').text(function () { 
    var str = $(this).html() + ''; 
    x = str.split('.'); 
    x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; 
    var rgx = /(\d+)(\d{3})/; 
    while (rgx.test(x1)) { 
        x1 = x1.replace(rgx, '$1' + ',' + '$2'); 
    } 
    $(this).html(x1 + x2); 
});
person Community    schedule 11.06.2014

http://locutus.io/php/strings/number_format/

module.exports = function number_format (number, decimals, decPoint, thousandsSep) { // eslint-disable-enter code hereline camelcase
  //  discuss at: http://locutus.io/php/number_format/
  // original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // improved by: davook
  // improved by: Brett Zamir (http://brett-zamir.me)
  // improved by: Brett Zamir (http://brett-zamir.me)
  // improved by: Theriault (https://github.com/Theriault)
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // bugfixed by: Michael White (http://getsprink.com)
  // bugfixed by: Benjamin Lupton
  // bugfixed by: Allan Jensen (http://www.winternet.no)
  // bugfixed by: Howard Yeend
  // bugfixed by: Diogo Resende
  // bugfixed by: Rival
  // bugfixed by: Brett Zamir (http://brett-zamir.me)
  //  revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  //  revised by: Luke Smith (http://lucassmith.name)
  //    input by: Kheang Hok Chin (http://www.distantia.ca/)
  //    input by: Jay Klehr
  //    input by: Amir Habibi (http://www.residence-mixte.com/)
  //    input by: Amirouche
  //   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'
  //  example 13: number_format('1 000,50', 2, '.', ' ')
  //  returns 13: '100 050.00'
  //  example 14: number_format(1e-8, 8, '.', '')
  //  returns 14: '0.00000001'

  number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
  var n = !isFinite(+number) ? 0 : +number
  var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
  var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
  var dec = (typeof decPoint === 'undefined') ? '.' : decPoint
  var s = ''

  var toFixedFix = function (n, prec) {
    if (('' + n).indexOf('e') === -1) {
      return +(Math.round(n + 'e+' + prec) + 'e-' + prec)
    } else {
      var arr = ('' + n).split('e')
      var sig = ''
      if (+arr[1] + prec > 0) {
        sig = '+'
      }
      return (+(Math.round(+arr[0] + 'e' + sig + (+arr[1] + prec)) + 'e-' + prec)).toFixed(prec)
    }
  }

  // @todo: for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec).toString() : '' + Math.round(n)).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)
}
person ezwey    schedule 27.01.2019