JavaScript 格式化金额常见方法

更新时间：2023年05月29日 09:47:17 作者：飞仔FeiZai

这篇文章主要介绍了JavaScript 格式化金额最常见方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

JavaScript 格式化金额

一、使用 Intl.NumberFormat 构造函数

这是 JavaScript 中格式化金额的最常见方法。Intl.NumberFormat()构造函数接受两个参数：语言环境和选项。语言环境是为其格式化金额的语言和地区。选项是一组控制金额格式的属性。例如，可以使用样式属性来指定货币的格式，使用货币属性来指定要将金额格式化为的货币。

const amount = 1234567.89;
const locale = "en-US";
const options = {
  style: "currency",
  currency: "USD",
};
const formattedAmount = new Intl.NumberFormat(locale, options).format(amount);
console.log(formattedAmount); //$1,234,567.89

二、使用 Number.prototype.toLocaleString 方法

要格式化金额，可以使用 JavaScript 的 toLocaleString() 方法。该方法可以将数字转换为本地化的字符串表示形式，并可以指定货币符号、小数点和千位分隔符等格式。

代码如下：

美元

const amount = 1234567.89;
const formattedAmount = amount.toLocaleString("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
console.log(formattedAmount); //$1,234,567.89

人民币

const amount = 1234567.89;
const formattedAmount = amount.toLocaleString("zh-CN", {
  style: "currency",
  currency: "CNY",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
console.log(formattedAmount);

在这个示例中，将数字变量 amount 使用 toLocaleString() 方法转换为本地化的字符串表示形式，并指定了以下格式：

style: 'currency' 表示使用货币格式显示金额。
currency: 'USD' 表示使用美元符号作为货币符号。
minimumFractionDigits: 2 表示最少保留两位小数。
maximumFractionDigits: 2 表示最多保留两位小数。

通过这种方式，可以使用 JavaScript 快速简单地实现金额格式化效果。需要注意的是，toLocaleString() 方法在不同的浏览器和操作系统中可能存在差异，需要进行兼容性测试和兼容性处理。

三、使用模板字符串 + Number.prototype.toFixed + 正则替换

const amount = 1234567.89;
const formattedAmount = `￥${amount
  .toFixed(2)
  .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
console.log(formattedAmount);

在这个示例中，通过 toFixed 使金额保留两位小数，使用正则替换的方式增加千位分隔符，再使用模板字符串进行拼接。

js金额数字格式化

一.使用字符串操作方法格式化

①整数金额格式化：

function moneyFormat (num) {
      const len = num.length
      return len <= 3 ? num : this.moneyFormat(num.substr(0, len - 3)) + ',' + num.substr(len - 3, 3)
}
var num = 12345000
var res = moneyFormat(String(num))
console.log('result:', res) // '12,345,000'

②自定义保留decimal位小数，并使用split分隔符的数字格式化：

function moneyFormat (num, decimal = 2, split = ',') {
  /*
    parameter：
    num：格式化目标数字
    decimal：保留几位小数，默认2位
    split：千分位分隔符，默认为,
    moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
  */
  function thousandFormat (num) {
    const len = num.length
    return len <= 3 ? num : thousandFormat(num.substr(0, len - 3)) + split + num.substr(len - 3, 3)
  }
  if (isFinite(num)) { // num是数字
    if (num === 0) { // 为0
      return num.toFixed(decimal)
    } else { // 非0
      var res = ''
      var dotIndex = String(num).indexOf('.')
      if (dotIndex === -1) { // 整数
        res = thousandFormat(String(num)) + '.' + '0'.repeat(decimal)
      } else { // 非整数
        // js四舍五入 Math.round()：正数时4舍5入，负数时5舍6入
        // Math.round(1.5) = 2
        // Math.round(-1.5) = -1
        // Math.round(-1.6) = -2
        // 保留decimals位小数
        const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入，然后固定保留2位小数
        const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小数位
        res = thousandFormat(numStr.slice(0, dotIndex)) + decimals
      }
      return res
    }
  } else {
    return '--'
  }
}
console.log('result:', moneyFormat(123456789.87654321)) // '123,456,789.88'

二.使用正则表达式格式化

①整数金额格式化：

function moneyFormat (num) {
      return String(num).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
}
var num = 12345000
var res = moneyFormat(num)
console.log('result:', res) // '12,345,000'

②自定义保留decimal位小数，并使用split分隔符的数字格式化：

function moneyFormat (num, decimal = 2, split = ',') {
  /*
    parameter：
    num：格式化目标数字
    decimal：保留几位小数，默认2位
    split：千分位分隔符，默认为,
    moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
  */
  if (isFinite(num)) { // num是数字
    if (num === 0) { // 为0
      return num.toFixed(decimal)
    } else { // 非0
      var res = ''
      var dotIndex = String(num).indexOf('.')
      if (dotIndex === -1) { // 整数
        res = String(num).replace(/(\d)(?=(?:\d{3})+$)/g, `$1${split}`) + '.' + '0'.repeat(decimal)
      } else { // 非整数
        // js四舍五入 Math.round()：正数时4舍5入，负数时5舍6入
        // Math.round(1.5) = 2
        // Math.round(-1.5) = -1
        // Math.round(-1.6) = -2
        // 保留decimals位小数
        const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入，然后固定保留2位小数
        const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小数位
        res = String(numStr.slice(0, dotIndex)).replace(/(\d)(?=(?:\d{3})+$)/g, `$1${split}`) + decimals
      }
      return res
    }
  } else {
    return '--'
  }
}
console.log('result:', moneyFormat(123456789.87654321)) // '123,456,789.88'

到此这篇关于JavaScript 格式化金额的文章就介绍到这了,更多相关js格式化金额内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Postman动态获取返回值过程详解
这篇文章主要介绍了Postman动态获取返回值过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
ECMAScript中迭代器的深入讲解
在ECMAScript 6增加了一个对象,它不是新的语法或新的内置对象,而一种协议（迭代器协议）,所有遵守这个协议的对象,都可以称之为迭代器,这篇文章主要给大家介绍了关于ECMAScript中迭代器的相关资料,需要的朋友可以参考下
2021-08-08
JavaScript利用Canvas实现粒子动画倒计时
粒子动画就是页面上通过发射许多微小粒子来表示不规则模糊物体。本文将利用canvas实现酷炫的粒子动画倒计时，感兴趣的小伙伴可以尝试一下
2022-12-12
微信小程序页面返回传值的4种解决方案汇总
这篇文章主要给大家介绍了关于微信小程序页面返回传值的4种解决方案,小程序开发中经常会遇到这种场景,比如提交问题,然后需要返回之前页面,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-07-07
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
今天小编就为大家分享一篇layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript类型相关的常用操作总结
这篇文章主要给大家总结介绍了关于JavaScript类型相关的常用操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
js 中获取制定的cook信息实现方法
下面小编就为大家带来一篇js 中获取制定的cook信息实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
js中什么时候不能使用箭头函数
箭头函数是和我们工作密切相关的东西，本文主要介绍了js中什么时候不能使用箭头函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Javascript中this关键字指向问题的测试与详解
this是Javascript中一个非常容易理解错，进而用错的特性。所以下面这篇文章主要给大家介绍了关于Javascript中this关键字指向问题的相关资料，文中通过测试的题目考验大家对this的熟悉程度，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-08-08
JS中不推荐使用的几个函数方法
随着JavaScript技术的不断进步和语言的持续演化,一些曾经备受瞩目的功能逐渐变得不再那么有用,甚至被更现代、更高效的替代方案所取代,今天,我们就来一起探讨几个原生JavaScript中那些“不再那么有用”的功能与API,最好避免使用的几个函数方法
2025-01-01