JQuery 数字格式答案

【问题标题】：JQuery Number FormattingJQuery 数字格式
【发布时间】：2011-11-11 17:25:42
【问题描述】：

关于这个基本功能的问题和答案太多了，我看不到树木的树木。

在 Java 中只有一个简单的答案（java.text.NumberFormat 及其子类），所以我相信大多数插件、问题和答案最终都会成熟为 JQuery 的事实标准。

这个插件是我目前找到的最好的，但不知道它是否还在开发中，是否成熟等等。

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

有没有更好的解决方案？是否成熟/活跃到可以依赖？

编辑：

我希望能够根据 Java 使用的相同格式模式来格式化货币、十进制、整数，以便在客户端接收到的数据无需先发送到服务器即可进行格式化。

例如

将1000 格式化为$1,000 或1,000.00 等（语言环境支持很好）

似乎http://plugins.jquery.com/project/numberformatter 完成了这项工作，但问题是：“我使用的是正确的东西吗？”或“有更好的方法吗？”

【问题讨论】：

这是咆哮还是问题？
为了记录，Java 和 Javascript 是两个完全不同的东西。因为没有 java 特性而敲 js 或 jQuery 是不公平的：P
@alex - 一个问题，咆哮是副作用，对不起
@Joseph - 我习惯于为任何 JQuery 找到解决方案，我被宠坏了......
一个更合理的问题是说明您的格式要求，以便就如何最好地满足这些要求提出建议。例如，加载一个库和相关的插件只是为了获得金钱的格式，当一个两三行的函数就可以完成这项工作时，这种做法就太过分了。另一方面，如果您正在寻找可以“做所有事情”的东西，那么您可能没有花足够的时间来确定您的需求是什么。

标签： javascript jquery number-formatting

【解决方案1】：

我建议您阅读这篇文章，了解如何使用 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 插件。

旁注 - check this out 如果你想对 jQuery 的过度使用嗤之以鼻。

【讨论】：

我用这段代码制作了一个 jQuery 插件。现在可以很容易地应用于页面中的多个位置：$('.number').formatNumber();。默认是把 1343034.09 变成 1,343,034.09 - github.com/RaphaelDDL/jquery.formatNumber
Abe，您提供的链接非常有帮助。也许您可以编辑您的答案并在此处添加主要功能，以防它消失？你已经获得了适当的荣誉。
不错的主意@PerryTew - 已添加
旧答案，但开箱即用，只需复制和粘贴，太棒了！！！

【解决方案2】：

使用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 from GitHub。

【讨论】：

在 Stack Overflow 上对包含有据可查来源的外部引用表示赞赏，但重要的是在您的答案中包含来自外部来源的最重要/相关的 sn-ps 并提供有关如何使用的上下文回答问题。
我使用这个插件有一段时间了，它不可用。当您键入时，您会看到值是如何延迟格式化的。光标跳转，所以如果你输入字段并且你有 0，你选择它并开始输入 220 光标跳转，你会得到 202 等等。如果你想做专业页面，这真的很糟糕。

【解决方案3】：

浏览器开发进度：

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"

【讨论】：

这不适用于西班牙语言环境和数字
为我工作：parseFloat("1234.891").toLocaleString('es-ES'); 输出 "1234,891"。这似乎是正确的，因为es-ES 允许使用句号和不使用句号。如果您需要“。”然后使用有它的ca-ES 语言环境。
这就是我所说的。千位分隔符不适用于西班牙语言环境中小于 10,000 的数字，但没关系，我创建了一个仅使用一行代码的 jquery 扩展方法，以便使用千位分隔符格式化整数，而无需担心设置特定的文化。

【解决方案4】：

我在 Abe Miessler addCommas 函数的基础上编写了一个 PHP 函数 number_format 的 JavaScript 模拟。可能有用。

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

【讨论】：

【解决方案5】：

如果您需要处理多种货币、各种数字格式等，我可以推荐autoNumeric。工作一种享受。已经成功使用了好几年了。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：