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

Posted 2023-02-19

【中文标题】如何使用 jquery 正确格式化货币？

【英文标题】：How can I correctly format currency using jquery?

【发布时间】：2011-06-29 22:37:03

【问题描述】：

我不需要掩码，但我需要能够格式化货币（在所有浏览器中）并且不允许输入任何字母或特殊字符的东西。感谢您的帮助

例子：

有效：50.00 美元 1,000.53 美元

无效：$w45.00 $34.3r6

【问题讨论】：

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

*** 是我的类似问题的搜索引擎。此处的社区反馈可以更快、更准确地了解哪些工具和实践受到重视。我说，让这类问题不断出现。

从 Google 获取。

此问题是“jquery 格式货币”的 Google 搜索结果排名靠前

这能回答你的问题吗？ How to format numbers as currency string?

【参考方案1】：

使用jquery.inputmask 3.x。 见演示here

包含文件：

<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'
  
);

亮点：

易于使用 可选部件在面具中 可以定义隐藏复杂性的别名 日期/日期时间掩码 数字掩码 大量回调 非贪婪面具 许多功能可以通过选项启用/禁用/配置 支持只读/禁用/dir="rtl" 属性 支持数据输入掩码属性 多掩码支持 正则表达式掩码支持 动态掩码支持 预处理掩码支持 没有输入元素的值格式化/验证

【讨论】：

下载 ZIP（从网络）后，我发现 ZIP 中的 *.js 文件具有不同的文件命名约定。我有点迷茫……

@gumuruh 查看 ZIP 文件的 dist/ 文件夹。解压缩文件夹根目录中的 ZIP 是打包的，不能使用。注意扩展。只加载你应该需要的。

@FernandoKosh @drew010 是否可以将其用于页面上的多个元素？例如：$('.price-format').inputmaks() 或 $('.price-format').each(function() $(this).inputmask() )

@remkovdm 自从我现在实施它已经有一段时间了，但是是的，我相信这很好。文档和示例显示 $(selector) 这意味着它可以像任何其他 jQuery 一样是 CSS 选择器。所以$('.price-format').inputmask('decimal', ... ); 应该工作。

【参考方案2】：

用 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+(?:\.\d0,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">

编辑：新检查值是否有效

【讨论】：

投反对票有什么问题？这个问题（请阅读meta.***.com/questions/251758/…是谢谢）

【参考方案3】：

我以前用jquery格式的货币插件，但是最近很bug。我只需要格式化美元/加元，所以我编写了自己的自动格式化。

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

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

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

【参考方案4】：

另一个选项（如果您使用 ASP.Net razor 视图）是，在您的视图中，您可以这样做

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

这将正确格式化它。注意（item.total 是双/十进制）

如果在 jQuery 中你也可以使用 Regex

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

【讨论】：

我没有投反对票，但我在任何 html 或 jQuery 参考中都找不到@String.Format。我的猜测是它与 ASP.NET 生成的服务器端 HTML 有关。原始问题是否提到了这一点？

对于任何想知道未来的人来说，@String.Format 是 ASP.NET 的剃刀引擎 || MVC

我喜欢正则表达式。为什么最后是 .toString() ？ .replace 返回一个字符串。

我也没有对此投反对票，但它值得为一个没有提到 Razor、MVC 甚至 ASP.NET 的问题提供 MVC Razor 解决方案，而答案没有甚至声明这是 MVC Razor 的解决方案。

没关系，我已经回答了我自己的问题：$(".totalSum").text('$' + parseFloat(value, 10).toFixed(0).replace(/(\ d)(?=(?:[0-9]3)+\b)/gm, "$1,").toString());

【参考方案5】：

扩展 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)(?=(\d3)+\.)/g, "$1,").toString();

【参考方案6】：

作为为什么 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();

【参考方案7】：

JQUERY FORMATCURRENCY 插件 http://code.google.com/p/jquery-formatcurrency/

【讨论】：

太糟糕了，不兼容最新版本的jQuery。

这个和 jquery 2.0 一样好用 plentz.github.io/jquery-maskmoney