前端金额格式化处理
前端项目中，金额格式化展示是很常见的需求，在此整理了一些通用的处理方式，如 toLocaleString()；正则匹配；slice()循环截取等等
以此为例：12341234.246 => ¥ 12,341,234.25
方式一：采用浏览器自带的Number.prototype.toLocaleString()处理整数部分，小数部分直接用Number.prototype.toFixed()四舍五入处理
/** * @params {Number} money 金额 * @params {Number} decimals 保留小数点后位数 * @params {String} symbol 前置符号 */ 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} ${result}`; }; formatMoney(12341234.246); // 12,341,234.25 formatMoney(12341234.246, "¥", 1); // ¥ 12,341,234.2 复制代码方式二：使用正则表达式处理整数部分，小数部分同上所示。有个《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 复制代码方式三：循环字符串，通过 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 num = arr[0]; let first = ""; 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
作者：时光足迹
链接：https://juejin.cn/post/7028086399601475591