在 JavaScript 中给数字加上千位分隔符并保留二位小数

原创已于 2023-11-18 21:21:22 修改 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2023-11-14 17:34:49 首次发布

本文介绍了在前端业务中如何使用JavaScript函数formatNumber和processDot对数字进行格式化，包括三位千分隔和保留两位小数，以及为何选择这种方法而非toFixed。

在前端业务中，我们经常需要对数字（比如说金额）进行处理，这个时候可能客户要求使用千位分隔符（例如说：999,999,999 这样的数字）来对数字进行格式化，那么应该如何去做呢？

一、业务场景一：对数字使用千分符。

function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); 
}

这里我们直接对数字进行toString()，将其转换成字符串。

然后使用正则表达式 /\B(?=(\d{3})+(?!\d))/g 来匹配数字中的每三位。

\B 匹配非单词边界,也就是数字中间位置。(?=(\d{3})+(?!\d)) 是一个正向前瞻匹配，匹配后面接三位数字但是不能把最后一位数字包含进来。

replace() 中使用逗号替换匹配到的位置。

这样就可以非常简洁的实现三位分隔了。

二、业务场景二：不仅使用千分符，并且保留两位小数。

function processDot(num, precision) {
  return (+(Math.round(+(num + "e" + precision)) + "e" + -precision)).toFixed(
    precision,
  );
}

function formatNumber(num) {
  const result = processDot(num, 2);
  return result.replace(/\d(?=(\d{3})+\.)/g, "$&,");
}

这里首先使用 processDot 函数将数字保留两位小数（自带四舍五入的功能）。然后使用正则表达式 /\d(?=(\d{3})+.)/g 来匹配数字后面每三位逗号分隔。

为什么不用自带的 toFixed 方法呢？因为 toFixed() 方法可能存在精度问题，如果计算涉及到金额，会不太女。

replace() 方法中的 $& 表示匹配到的数字，所以可以把匹配到的数字替换成自身加上逗号。

这样就可以很方便的格式化数字为指定小数位数并加上千分符了。