首页 > JavaScript > 如何将数字格式化为货币字符串?

如何将数字格式化为货币字符串?

上一篇 下一篇

我想用JavaScript格式化价格。我想要一个函数,它将 a 作为参数并返回如下格式:floatstring

"$ 2,500.00"

我该怎么做?

分割线

网友回答:

编号.原型.到固定

此解决方案与每个主要浏览器兼容:

  const profits = 2489.8237;

  profits.toFixed(3) // Returns 2489.824 (rounds up)
  profits.toFixed(2) // Returns 2489.82
  profits.toFixed(7) // Returns 2489.8237000 (pads the decimals)

您所需要的只是添加货币符号(例如),您将获得以美元为单位的金额。"$" + profits.toFixed(2)

自定义函数

如果需要在每个数字之间使用 ,可以使用此功能:,

function formatMoney(number, decPlaces, decSep, thouSep) {
    decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
    decSep = typeof decSep === "undefined" ? "." : decSep;
    thouSep = typeof thouSep === "undefined" ? "," : thouSep;
    var sign = number < 0 ? "-" : "";
    var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
    var j = (j = i.length) > 3 ? j % 3 : 0;

    return sign +
        (j ? i.substr(0, j) + thouSep : "") +
        i.substr(j).replace(/(decSep{3})(?=decSep)/g, "$1" + thouSep) +
        (decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : "");
}

document.getElementById("b").addEventListener("click", event => {
  document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>

像这样使用它:

(123456789.12345).formatMoney(2, ".", ",");

如果始终要使用“.”和“”,“”,则可以将它们从方法调用中删除,该方法将为您默认它们。

(123456789.12345).formatMoney(2);

如果您的区域性翻转了两个符号(即欧洲人),并且您想使用默认值,只需在方法中粘贴以下两行:formatMoney

    d = d == undefined ? "," : d,
    t = t == undefined ? "." : t,

自定义函数 (ES6)

如果你可以使用现代的 ECMAScript 语法(即通过 Babel),你可以改用这个更简单的函数:

function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") {
  try {
    decimalCount = Math.abs(decimalCount);
    decimalCount = isNaN(decimalCount) ? 2 : decimalCount;

    const negativeSign = amount < 0 ? "-" : "";

    let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
    let j = (i.length > 3) ? i.length % 3 : 0;

    return
      negativeSign +
      (j ? i.substr(0, j) + thousands : '') +
      i.substr(j).replace(/(d{3})(?=d)/g, "$1" + thousands) +
      (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
  } catch (e) {
    console.log(e)
  }
};

document.getElementById("b").addEventListener("click", event => {
  document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>

分割线

网友回答:

国际数字格式

JavaScript 有一个格式化程序(国际化 API 的一部分)。

// Create our number formatter.
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',

  // These options are needed to round to whole numbers if that's what you want.
  //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
  //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
});

console.log(formatter.format(2500)); /* $2,500.00 */

代替第一个参数(在示例中)以使用系统区域设置(如果代码在浏览器中运行,则为用户区域设置)。区域设置代码的进一步说明。undefined'en-US'

以下是货币代码的列表。

Intl.NumberFormat vs Number.prototype.toLocaleString

最后一点,将其与旧的..它们都提供基本相同的功能。但是,toLocaleString 在其较旧的版本(pre-Intl)中实际上并不支持区域设置:它使用系统区域设置。因此,在调试旧浏览器时,请确保您使用的是正确的版本(MDN 建议检查是否存在)。如果您不关心旧浏览器或只是使用垫片,则根本不需要担心这一点。toLocaleStringIntl

此外,对于单个项目,两者的性能相同,但是如果您要格式化很多数字,则使用速度要快~70倍。因此,通常最好在每次页面加载中仅使用和实例化一次。无论如何,这是等效的用法:Intl.NumberFormatIntl.NumberFormattoLocaleString

console.log((2500).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
})); /* $2,500.00 */

关于浏览器支持和节点的一些说明.js

  • 如今,浏览器支持不再是问题,全球支持率为98%,美国为99%,欧盟为99 +%
  • 有一个垫片可以在化石浏览器(如Internet Explorer 8)上支持它,如果你真的需要的话
  • v13 之前的 Node.js 仅支持开箱即用。一种解决方案是安装全ICU,有关更多信息,请参阅此处en-US
  • 查看CanIUse以获取更多信息

分割线

网友回答:

简短而快速的解决方案(适用于任何地方!

(12345.67).toFixed(2).replace(/d(?=(d{3})+.)/g, '$&,');  // 12,345.67

该解决方案背后的想法是用第一个匹配和逗号替换匹配的部分,即.匹配是使用前瞻方法完成的。您可以将表达式理解为“如果数字后跟三个数字集(一个或多个)和一个点的序列,则匹配该数字”。'$&,'

测试:

1        --> "1.00"
12       --> "12.00"
123      --> "123.00"
1234     --> "1,234.00"
12345    --> "12,345.00"
123456   --> "123,456.00"
1234567  --> "1,234,567.00"
12345.67 --> "12,345.67"

演示:http://jsfiddle.net/hAfMM/9571/


扩展短解决方案

您还可以扩展对象的原型,以添加对任意数量的小数和数字组大小的额外支持:Number[0 .. n][0 .. x]

/**
 * Number.prototype.format(n, x)
 * 
 * @param integer n: length of decimal
 * @param integer x: length of sections
 */
Number.prototype.format = function(n, x) {
    var re = '\d(?=(\d{' + (x || 3) + '})+' + (n > 0 ? '\.' : '$') + ')';
    return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
};

1234..format();           // "1,234"
12345..format(2);         // "12,345.00"
123456.7.format(3, 2);    // "12,34,56.700"
123456.789.format(2, 4);  // "12,3456.79"

演示/测试:http://jsfiddle.net/hAfMM/435/


超长短解

在此超级扩展版本中,您可以设置不同的分隔符类型:

/**
 * Number.prototype.format(n, x, s, c)
 * 
 * @param integer n: length of decimal
 * @param integer x: length of whole part
 * @param mixed   s: sections delimiter
 * @param mixed   c: decimal delimiter
 */
Number.prototype.format = function(n, x, s, c) {
    var re = '\d(?=(\d{' + (x || 3) + '})+' + (n > 0 ? '\D' : '$') + ')',
        num = this.toFixed(Math.max(0, ~~n));

    return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
};

12345678.9.format(2, 3, '.', ',');  // "12.345.678,90"
123456.789.format(4, 4, ' ', ':');  // "12 3456:7890"
12345678.9.format(0, 3, '-');       // "12-345-679"

演示/测试:http://jsfiddle.net/hAfMM/612/

模板简介:该模板名称为【如何将数字格式化为货币字符串?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 209次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 03-16
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信素材 微信图片 微信模板 微信公众平台 html5 微信文章 单页式简历模板 响应式 自适应 企业网站
您可能会喜欢的其他模板