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格式化金额内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js遍历数组及获取数组对象的key和key的值实现方式
这篇文章主要介绍了js遍历数组及获取数组对象的key和key的值实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2026-03-03
微信小程序使用前置摄像头拍照
这篇文章主要为大家详细介绍了微信小程序使用前置摄像头拍照，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
javascript点击按钮实现隐藏显示切换效果
这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下
2016-02-02
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下
2015-03-03
TypeScript中class类型实例讲解
众所周知在TypeScript中定义变量需要指定标识符的类型,下面这篇文章主要给大家介绍了关于TypeScript中class类型的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
JavaScript中的Proxy代理的用法和功能详解
Proxy代理是JavaScript中一项强大而灵活的功能，它可以用于拦截、修改和自定义对象的底层操作，这篇文章主要介绍了JavaScript中的Proxy代理的各种用法和功能,需要的朋友可以参考下
2023-06-06
基于javascript实现listbox左右移动
这篇文章主要介绍了基于javascript实现listbox左右移动的相关资料，以一个完整的实例代码分析了js实现listbox左右移动的相关技巧，感兴趣的小伙伴们可以参考一下
2016-01-01
JavaScript实现换肤功能
js换肤功能的实现原理非常简单，就是使用js切换对应的css样式表文件，本文重点给大家介绍JavaScript实现换肤功能，感兴趣的朋友参考下吧
2017-09-09
24个实用JavaScript 开发技巧
这篇文章主要给大家分享了24个实用JavaScript 的开发技巧，文章围绕JavaScript 的开发技巧讲解展开全文，具有一定的参考价值,需要的朋友可以参考一下，希望对你有所帮助
2021-12-12
javascript动态加载三
首先是通过同步策略来实现模块加载与回调函数之间进行分离，接着是通过异步策略来实现模块加载与回调函数之间进行分离
2012-08-08