如何使用jquery正确格式化货币？

Question

我不需要面罩，但我需要一些可以在所有浏览器中格式化货币的东西，并且不允许输入任何字母或特殊字符。谢谢帮助。

示例：

有效：$50.00 $1,000.53

无效：$w45.00 $34.3r6

- ninjasense

---

你能解释一下为什么其他的不符合你的标准吗？ - Jeff

StackOverflow是我搜索这类问题的搜索引擎。这里的社区反馈可以更快、更准确地了解哪些工具和实践受到重视。我认为，继续提出这类问题是好的。 - Feckmore

从谷歌搜索来到这里。 - the-nick-wilson

这个问题是在“jquery格式化货币”关键词下的谷歌搜索结果中排名最高的。 - Paul L

这个回答解决了你的问题吗？如何将数字格式化为货币字符串？ - Heretic Monkey

Answer 1

如果你正在使用ASP.Net razor视图，另一个选项是在你的视图上执行以下操作：

<div>@String.Format("{0:C}", Model.total)</div>

这将正确格式化它。请注意（item.total是double/decimal）

如果在jQuery中，您也可以使用正则表达式

$(".totalSum").text('$' + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

- Melu

---

我没有投票反对，但我无法在任何 HTML 或 jQuery 参考资料中找到 @String.Format。我猜测这可能与由 ASP.NET 生成的服务器端 HTML 有关。原始问题提到了吗？ - Nate

@String.Format是用于ASP.NET || MVC的Razor引擎，如果未来有人有疑问，请知道这个。 - Kyle

我喜欢正则表达式。为什么要在末尾加上.toString()？.replace返回一个字符串。 - xr280xr

我也没有对这个进行负面评价，但由于它给一个并没有提到Razor、MVC，甚至连ASP.NET都没有提到的问题提供了一个MVC Razor解决方案，而答案并没有说明这是一个MVC Razor的解决方案，因此它实际上值得被贬低评分。 - Jonathan Wood

没关系，我已经回答了自己的问题： $(".totalSum").text('$' + parseFloat(value, 10).toFixed(0).replace(/(\d)(?=(?:[0-9]{3})+\b)/gm, "$1,").toString());意思是将value转化为浮点数并四舍五入到整数，然后添加美元符号和千位分隔符，并将结果显示在类名为"totalSum"的HTML元素中。 - ministe

Answer 2

JQUERY FORMATCURRENCY PLUGIN是一个jQuery插件，可以用于格式化货币金额。你可以在这里找到它。

- Robert Harvey

---

很遗憾，它与最新版本的jQuery不兼容。 - Patrick

这个在 jQuery 2.0 及以上版本中表现相当不错：http://plentz.github.io/jquery-maskmoney/ - hal9000

Answer 3

在Melu的回答基础上，您可以将此代码封装成一个函数并处理负金额。

示例输出：
$5.23
-$5.23

function formatCurrency(total) {
    var neg = false;
    if(total < 0) {
        neg = true;
        total = Math.abs(total);
    }
    return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}

- Chad Kuehn

Answer 4

作为jQuery FormatCurrency插件是一个好答案的推论，我想反驳你的评论：

1. code.google.com/p/jquery-formatcurrency - 不能过滤所有字母。您可以输入一个单独的字母，并且它不会将其删除。

是的，formatCurrency()本身并没有过滤掉字母：

// only formats currency
$(selector).formatCurrency();

但是formatCurrency插件中包含的toNumber()函数可以实现这一点。

因此，你需要执行以下操作：

// removes invalid characters, then formats currency
$(selector).toNumber().formatCurrency();

- Neptune Systems

Answer 5

请使用 jquery.inputmask 3.x。 查看演示 此处。

包含文件：

<script src="/assets/jquery.inputmask.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.extensions.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.numeric.extensions.js" type="text/javascript"></script>

并且编码为

$(selector).inputmask('decimal',
  { 'alias': 'numeric',
    'groupSeparator': '.',
    'autoGroup': true,
    'digits': 2,
    'radixPoint': ",",
    'digitsOptional': false,
    'allowMinus': false,
    'prefix': '$ ',
    'placeholder': '0'
  }
);

亮点：

• 易于使用
• 遮罩中的可选部分可以出现在任何地方
• 可以定义别名来隐藏复杂性
• 日期/日期时间遮罩
• 数字遮罩
• 许多回调函数
• 非贪婪遮罩
• 许多功能可以通过选项启用/禁用/配置
• 支持readonly/disabled/dir="rtl"属性
• 支持data-inputmask属性
• 多遮罩支持
• 正则表达式遮罩支持
• 动态遮罩支持
• 预处理遮罩支持
• 值格式化/验证无需输入元素

- Fernando Kosh

---

在从网上下载ZIP文件后，我发现其中的*.js文件具有不同的文件命名约定。我有点困惑... - gumuruh

@gumuruh 请查看ZIP文件的dist/文件夹。根目录下的ZIP文件是软件包，不适用于使用。注意扩展名。只加载您需要的内容。 - Fernando Kosh

@FernandoKosh @drew010 这个能否用于页面上的多个元素？例如： $('.price-format').inputmaks() 或者 $('.price-format').each(function() { $(this).inputmask() }) - remkovdm

@remkovdm 距离我实现它已经有一段时间了，但是我相信那是没问题的。文档和示例显示 $(selector)，这意味着它可以像任何其他 jQuery 选择器一样是一个 CSS 选择器。因此 $('.price-format').inputmask('decimal', { ... }); 应该 可以工作。 - drew010

Answer 6

我曾经使用过jQuery格式货币插件，但最近它非常容易出现错误。我只需要对美元/加拿大元进行格式化，所以我编写了自己的自动格式化。

$(".currencyMask").change(function () {
            if (!$.isNumeric($(this).val()))
                $(this).val('0').trigger('change');

            $(this).val(parseFloat($(this).val(), 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
        });

只需将希望格式化为货币的任何输入的类设置为<input type="text" class="currencyMask" />，它将在任何浏览器中完美格式化。

- Greg Snider

Answer 7

尝试使用jQuery正则表达式货币（无插件）：

$(document).ready(function(){
  $('#test').click(function() {
    TESTCURRENCY = $('#value').val().toString().match(/(?=[\s\d])(?:\s\.|\d+(?:[.]\d+)*)/gmi);
    if (TESTCURRENCY.length <= 1) {
      $('#valueshow').val(
        parseFloat(TESTCURRENCY.toString().match(/^\d+(?:\.\d{0,2})?/))
      );
    } else {
      $('#valueshow').val('Invalid a value!');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" value="12345.67890" id="value">
<input type="button" id="test" value="CLICK">
<input type="text" value="" id="valueshow">

编辑：新增检查值是否有效/无效

- KingRider

---

下投票有什么问题吗？这个问题（请阅读https://meta.stackoverflow.com/questions/251758/why-is-stack-overflow-so-negative-of-late）是感谢的。 - KingRider

Answer 8

JavaScript已经具备此功能。

var cur = function (amt) {
    return Intl.NumberFormat('en-US', { style: "currency", currency: "USD" }).format(amt);
};

- esenkaya

---

这应该是被接受的答案。大多数回答提供了各种类似于基于.NET的垃圾解决方案。"简约是终极的精致。" - 列奥纳多·达·芬奇 - Alex K

Answer 9

C#

@{
    CultureInfo newCulture = CultureInfo.CreateSpecificCulture(Model.culture);
var ri = new RegionInfo(@newCulture.LCID);
}

jQuery

$(document).find("#labGrandTotal").text(Intl.NumberFormat('@Model.culture', { style: 'currency', currency: '@ri.ISOCurrencySymbol'}).format(num));

其中Model.culture的示例为"en-GB"

- aegsomweb