开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

每天梳理一个场景，知识点查漏补缺，充实满足。

正文

背景

项目中的金额展示，现在的设计要求，必须将金额展示成千分位格式，在展示较大的数字的场景中，比如金额，总计等等，对这些数字进行千分位，是一种很常见的做法，比较直观方便，利于阅读。

方法

一，数组/字符串分割

思路是，纯切割，手动每三位添加','，不太推荐，这里就不描述了

二，利用正则

原理是，d{3} 每3位数字匹配一次，对前面一个数字加逗号。此处正则不会区分小数点，所以我们要写两个

/*金额三位数分隔*/

formatNumber(num) {
  num = num.toString()
  let reg = num.indexOf('.') > -1 ? /(\d)(?=(\d{3})+.)/g : /(\d)(?=(\d{3})+$)/g
  return num.replace(reg, '$1,')
}

formatNumber(1234.5678) // "1,234.5678"
formatNumber(1234) // "1,234"

三，number.toLocaleString

初始化数字或日期，通过传参来表现，某些场景下相当有用。比如这个问题，toLocaleString在数字类型上的使用，金额的千分位实现

const num = 15838742;
num.toLocaleString(); // 15,838,742
num.toLocaleString('zh', { styleț 'percent' }); //15,838,742%   也可以带百分号
num.toLocaleString('zh',{ style:'currency', currency:'CNY'}); / /¥2,333,333.00  带货币符号

四，工具类

手写的方法总是会有一定概率发生错误，尤其对于金额的处理，发生失误影响面会很大，需要特别的严谨，最推荐的还是使用成熟的工具，比如 numeral。

Numeral.js 是一个用于格式化和操作数字的 JavaScript 库，数字可以格式化成货币、百分比、时间，甚至是带有小数点、千分位和缩写，这里只介绍千分位，具体可以去官网详细看下。

import numeral from "numeral";
const numeralFormat ={
  normal:"0,0", // 不带小数  1,234
  percentage:"0.[0]%", // 带百分比
  money:"0,0.00", //保留两位小数  1,234.00
} ;

numeral(123456).format(numeralFormat[type]);