如何将数字格式设置为货币字符串国际号码格式

2022-08-29 21:50:47

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

"$ 2,500.00"

最好的方法是什么?


答案 1

国际号码格式

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

// Create our number formatter.
var 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)
});

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

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

下面是货币代码的列表

Intl.NumberFormat vs Number.prototype.toLocaleString

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

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

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

有关浏览器支持和 Node 的一些说明.js

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

答案 2

Number.prototype.toFixed

该解决方案与每个主流浏览器兼容:

  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>