前端金额格式化处理

2023-08-22 18:24| 来源: 网络整理| 查看: 265

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

前端项目中，金额格式化展示是很常见的需求，在此整理了一些通用的处理方式，如 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

【本文地址】

前端金额格式化处理

前端金额格式化处理

今日新闻

推荐新闻