JS金额千分位|极客笔记

JS金额千分位

在前端开发中，经常会遇到需要格式化金额为千分位的情况。金额千分位指的是在金额数字中每隔三位加一个逗号，以提高金额的可读性。本文将详细讨论如何使用JavaScript实现金额千分位的格式化。

方法一：使用正则表达式

function formatMoney(num) {
    num = num.toString().replace(/\$|,/g, '');
    if(isNaN(num))
        num = "0";

    let sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    let cents = num % 100;
    num = Math.floor(num / 100).toString();

    if(cents < 10)
        cents = "0" + cents;

    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
        num = num.substring(0, num.length - (4 * i + 3)) + ',' +
              num.substring(num.length - (4 * i + 3));

    return (((sign) ? '' : '-') + num + '.' + cents);
}

let amount = 1234567.89;
console.log(formatMoney(amount)); // 输出：1,234,567.89

方法二：使用Intl.NumberFormat

function formatMoneyIntl(num) {
    return new Intl.NumberFormat().format(num);
}

let amount = 9876543.21;
console.log(formatMoneyIntl(amount)); // 输出：9,876,543.21

方法三：自定义函数

function formatMoneyCustom(num) {
    return num.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}

let amount = 54321.876;
console.log(formatMoneyCustom(amount)); // 输出：54,321.88

以上三种方法都可以实现金额千分位的格式化，开发者可以根据自己的需求选择合适的方法进行使用。

除了以上列出的方法外，也可以通过CSS实现金额千分位的显示效果。比如利用CSS中的text-align: right和direction: rtl，结合unicode-bidi: bidi-override来实现。

总结一下，金额千分位的格式化在前端开发中是一个常见的需求，通过JavaScript的相关函数或者CSS样式都可以很方便地实现。开发者可以根据自己的项目要求和喜好选择合适的方法进行实现，以提高用户体验和页面的可读性。