前端金额格式化处理

「这是我参与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