注册

前端金额格式化处理

前端项目中,金额格式化展示是很常见的需求,在此整理了一些通用的处理方式,如 toLocaleString();正则匹配;slice()循环截取等等;也解决了小数点精度问题



以此为例:12341234.246 => ¥ 12,341,234.25


方式一:采用浏览器自带的Number.prototype.toLocaleString()处理整数部分,小数部分直接用Number.prototype.toFixed()四舍五入处理


// v1.0
const formatMoney = (money, symbol = "", decimals = 2) => {
if (!(money && money > 0)) {
return 0.0;
}

let arr = money.toFixed(decimals).toString().split(".");
let first = parseInt(arr[0]).toLocaleString();
let result = [first, arr[1]].join(".");
return `${symbol} ${money.toFixed(decimals)}`;
};

formatMoney(12341234.246); // 12,341,234.25
formatMoney(12341234.246, "¥", 1); // ¥ 12,341,234.2

2021.11.9 更改记录 我之前写复杂了,经过评论区[黄景圣]的指点,优化如下:


// v2.0 简化函数
const formatMoney = (money, symbol = "", decimals = 2) =>
`${symbol} ${parseFloat(money.toFixed(decimals)).toLocaleString()}`;

formatMoney(12341234.246, "¥", 2) // ¥ 12,341,234.25

// 或者只用toLocaleString()处理
const format = (money, decimals = 2) =>
money.toLocaleString("zh", {
style: "currency",
currency: "CNY",
maximumFractionDigits: decimals,
useGrouping: true, // false-没有千位分隔符;true-有千位分隔符
});
format(12341234.246); // ¥12,341,234.25

2021.11.10 更改记录 经过评论区[你摸摸我这料子]的提示,解决了 toFixed() 精度失效的问题,具体可查看前端小数展示精度处理


// 测试数据如下:
formatMoney(12.035); // 12.04 正常四舍五入
formatMoney(12.045); // 12.04 异常,应该为12.05,没有四舍五入

// v3.0 解决toFixed()问题
const formatToFixed = (money, decimals = 2) => {
return (
Math.round((parseFloat(money) + Number.EPSILON) * Math.pow(10, decimals)) /
Math.pow(10, decimals)
).toFixed(decimals);
};
const formatMoney = (money, symbol = "", decimals = 2) =>
`${symbol}${parseFloat(formatToFixed(money, decimals)).toLocaleString()}`;

formatMoney(12341234.035, '¥'); // ¥12,341,234.04
formatMoney(12341234.045, '¥'); // ¥12,341,234.05

2021.11.17 更改记录 通过评论区[Ryan_zhang]的提醒,解决了保留四位小数显示的问题


// v4.0 只更改了formatMoney函数,其他的不变
const formatMoney = (money, symbol = "", decimals = 2) =>
`${symbol}${parseFloat(formatToFixed(money, decimals)).toLocaleString(
"zh",
{
maximumFractionDigits: decimals,
useGrouping: true,
}
)}`;
formatMoney(12341234.12335, "¥", 4); // ¥12,341,234.1234
formatMoney(12341234.12345, "¥", 4); // ¥12,341,234.1235

方式二:使用正则表达式处理整数部分,小数部分同上所示。有个《JS 正则迷你书》介绍正则表达式挺好的,在 2.4.2 章就讲了“数字的千位分隔符表示法”,介绍的很详细,推荐看看。



  • \b:单词边界,具体就是 \w 与 \W 之间的位置,也包括 \w 与 ^ 之间的位置,和 \w 与 $ 之间的位置
  • \B :\b 的反面的意思,非单词边界
  • (?=p):其中 p 是一个子模式,即 p 前面的位置,或者说,该位置后面的字符要匹配 p

/**
* @params {Number} money 金额
* @params {Number} decimals 保留小数点后位数
* @params {String} symbol 前置符号
*/
const formatMoney = (money, symbol = "", decimals = 2) => {
let result = money
.toFixed(decimals)
.replace(/\B(?=(\d{3})+\b)/g, ",")
.replace(/^/, `${symbol}`);
return result;
};

formatMoney(12341234.246, "$", 2); // $12,341,234.25

// v2.0 解决toFixed()问题
const formatMoneyNew = (money, symbol = "", decimals = 2) =>
formatToFixed(money, decimals)
.replace(/\B(?=(\d{3})+\b)/g, ",")
.replace(/^/, `${symbol}`);

formatMoneyNew(12341234.035, "¥", 2); // ¥12,341,234.04
formatMoneyNew(12341234.045, "¥", 2); // ¥12,341,234.05

方式三:循环字符串,通过 slice 截取实现



  • substring(start, end):包含 start,不包含 end
  • substr(start, length):包含 start,长度为 length
  • slice(start, end):可操作数组和字符串;包含 start,不包含 end
  • splice(start, length, items):只能针对数组;增删改都可以

const formatMoney = (money, symbol = "", decimals = 2) => {
// 改造前
// let arr = money.toFixed(decimals).toString().split(".");
// 改造后
let arr = formatToFixed(money, decimals).toString().split(".");
let num = arr[0];
let first = "";
su;
while (num.length > 3) {
first = "," + num.slice(-3) + first;
num = num.slice(0, num.length - 3);
}
if (num) {
first = num + first;
}
return `${symbol} ${[first, arr[1]].join(".")}`;
};

formatMoney(12341234.246, "$", 2); // $ 12,341,234.25
formatMoney(12341234.035, "¥", 2); // ¥ 12,341,234.04
formatMoney(12341234.045, "¥", 2); // ¥ 12,341,234.05

2021.11.24 更改记录 通过评论区[SpriteBoy]和[maxxx]的提醒,采用Intl内置的NumberFormat试试


方式四:Intl.NumberFormat,用法和toLocaleString()挺相似的


const formatMoney = (money, decimals = 2) => {
return new Intl.NumberFormat("zh-CN", {
style: "currency", // 货币形式
currency: "CNY", // "CNY"是人民币
currencyDisplay: "symbol", // 默认“symbol”,中文中代表“¥”符号
// useGrouping: true, // 是否使用分组分隔符,如千位分隔符或千/万/亿分隔符,默认为true
// minimumIntegerDigits: 1, // 使用的整数数字的最小数目.可能的值是从1到21,默认值是1
// minimumFractionDigits: 2, // 使用的小数位数的最小数目.可能的值是从 0 到 20
maximumFractionDigits: decimals, // 使用的小数位数的最大数目。可能的值是从 0 到 20
}).format(money);
};

console.log(formatMoney(12341234.2, 2)); // ¥12,341,234.20
console.log(formatMoney(12341234.246, 1)); // ¥12,341,234.2
console.log(formatMoney(12341234.035, 2)); // ¥12,341,234.04
console.log(formatMoney(12341234.045, 2)); // ¥12,341,234.05
console.log(formatMoney(12341234.12335, 4)); // ¥12,341,234.1234
console.log(formatMoney(12341234.12345, 4)); // ¥12,341,234.1235

作者:时光足迹
链接:https://juejin.cn/post/7028086399601475591

0 个评论

要回复文章请先登录注册