浮动到货币JS - Javascript

在前端开发中，常常需要对金额进行格式化，主要目的是方便用户阅读和提高用户体验。其中一种格式化方法是将金额转换为带有小数点和千位分隔符的字符串形式。如将 1234567.89 转换为 1,234,567.89。

在Javascript中，可以使用浮点数的toLocaleString方法来实现这种格式化。

toLocaleString()

toLocaleString() 是Javascript中内置的方法，可以将数字转换为字符串，并按照本地化环境的要求转换。toLocaleString() 方法可以带两个参数：用来表示区域设置的字符串，以及一个可选参数，用来指定小数部分的显示位数。在使用toLocalString进行金额格式化时，需要注意以下几点：

• 小数位数：一般情况下我们需要保留两位小数，可以使用toLocalString(2) 实现；
• 货币符号：货币符号可以手动添加，也可以通过Intl.NumberFormat API实现；
• 千位分隔符：图形千位分隔符","或添加其他字符或字体图标。

示例代码

/**
 * 将浮点数转换为货币格式
 * @param {*} floatNum 目标浮点数
 * @param {*} symbol 货币符号
 * @param {*} decimalNum 小数点后保留位数
 * @returns 格式化后的货币字符串
 */
function toCurrency(floatNum, symbol = '￥', decimalNum = 2) {
  let num = parseFloat(floatNum);
  if (isNaN(num)) {
    return '0.00';
  }
  return symbol + num.toLocaleString('zh-CN', { minimumFractionDigits: decimalNum, maximumFractionDigits: decimalNum });
}

// demo
console.log(toCurrency(1234567.89)); // ￥1,234,567.89
console.log(toCurrency(1234567.89, '$', 3)); // $1,234,567.890

以上代码实现了将浮点数转换为货币格式的功能。toCurrency() 函数接收三个参数，分别是目标浮点数，货币符号和小数点后保留位数。在函数内部，通过parseFloat()方法将浮点数转换为可计算的数字类型。接着再通过toLocaleString() 方法按照指定的规则进行转换，并返回格式化后的字符串。在示例中，第一个toCurrency() 函数调用中，货币符号默认为人民币￥，小数点保留2位。第二个toCurrency() 函数调用中，货币符号为美元 $，小数点保留3位。

这个转换货币的实例可以具体应用于以下场景：

• 商城项目中需要格式化商品价格；
• 财务系统中需要显示计算金额和汇总金额；
• 电商系统中显示订单金额，折扣金额等等。

结论

在浮动到货币JS -Javascript 的介绍中，我们讲解了toLocaleString方法的使用，通过使用这个方法，我们可以将浮点数转换成格式化后的货币字符串，方便用户阅读和提高用户体验。