前端金额格式化处理

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