Форматирование номера JQuery - PullRequest
38 голосов
/ 07 сентября 2011

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

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

Этот плагин - лучшее, что я нашел до сих пор, но я не знаю, развился ли он, зрел ли и т. Д.

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

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


Редактировать:

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

например,

Формат 1000 до $1,000 или 1,000.00 и т. Д. (Поддержка локали хорошая)

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

Ответы [ 8 ]

65 голосов
/ 07 сентября 2011

Я бы порекомендовал посмотреть в этой статье, как использовать 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;
}

source: http://www.mredkj.com/javascript/numberFormat.html

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

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

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

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

18 голосов
/ 29 октября 2012

Используя плагин 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.

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

.number (theNumber, decimalPlaces, decimalSeparator, тысячSeparator)

Вы также можете получить jQuery Number Format изGitHub .

5 голосов
/ 27 августа 2018

Разработка браузеров:

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"
3 голосов
/ 07 июня 2016

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

1 голос
/ 23 июля 2018

Я написал JavaScript-аналог функции PHP number_format на основе 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
1 голос
/ 22 октября 2014

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

// 5000,00

1 голос
/ 11 июня 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); 
});
0 голосов
/ 27 января 2019

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