页面显示的数据千分位处理，包括echart数据千分位处理（将数据每三位用逗号分隔）

最近用echart做金融报表系统，做了三十来个页面之后提出要让数据以千分位形式显示；

页面既有表格又有echart图表，传入到echart的数据如果直接就带了"，"，那必将无法显示。

最后我做了一个过滤器和一个公用函数；过滤器给表格用，公用函数给echart使用（用在label和tooltip的formatter回调函数中）。

将数据每三位用逗号分隔的函数：

function formatNum(value) {
  if(!value&&value!==0) return 0;

  let str = value.toString();
  let reg = str.indexOf(".") > -1 ? /(d)(?=(d{3})+.)/g : /(d)(?=(?:d{3})+$)/g;
  return str.replace(reg,"$1,");
}

这个函数里的正则是从网上copy来，看到好多个博客用了类似的正则，但是无一例外没有看到相应的解析， 
因为对正则的了解不够深，再加上不喜欢把没有理解的东西直接拿来用，我解读了好久，同时多次修改正则并查看控制台结果后，才将它理解：
　　大概是这个意思：
   　从整数部分的后面向前查找（即从个位开始往前），
   　查找3个整数前面的那个数字，即相当于:从后向前，每3个数字为一组分组，然后把目标定位在这3个数字前的那一个数字
　 （假定这个数字为x,这个x即等同于replace方法中的$1，这个$1也就是指正则中的（d），把它替换为“它本身+逗号”（即replace方法中的“$1,”）

接下来我们一点点分析这行正则里面每个成分的含义：
（1）如何理解$1的含义：
　　()表示捕获分组，()会把每个分组里的匹配的值保存起来，使用：$n(n是一个数字，表示第n个捕获组的内容)
　　(?:)表示非捕获分组，和捕获分组唯一的区别在于，非捕获分组匹配的值不会保存起来(可以提高程序执行速度)

　　w3school有$1,$2...的例子：
　　//把 "Doe, John" 转换为 "John Doe"：
　　var str = "Doe, John";
　　str.replace(/(w+)s*, s*(w+)/, "$2 $1");
　　//$1,$2：按顺序对应小括号里面的正则捕获到的内容。 （即$1对应第一个(w+)，$2对应第二个(w+)）

　　补充(摘自他人的博客)：
　　“?:”非获取匹配，匹配冒号后的内容但不获取匹配结果，不进行存储供以后使用。(可以提高程序执行速度)
　　单独的“?”：匹配前面的子表达式零次或一次。
　　当“?”紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少地匹配所搜索的字符串，而默认的贪婪模式则尽可能多地匹配所搜索的字符串。

（2）?=的含义（整合自他人的博客）：
　　首先要了解下正则的前瞻后顾

　　前瞻的形式为：
　　(?=pattern) 为肯定式前瞻，(?!pattern) 为否定式前瞻
　　后顾则用的比较少，形式为
　　(?<=pattern) 肯定式后顾 ， (?<!pattern)否定式后顾

　　更具体来说：
　　前瞻：
　　exp1(?=exp2) 查找exp2前面的exp1
　　后顾：
　　(?<=exp2)exp1 查找exp2后面的exp1
　　负前瞻：
　　exp1(?!exp2) 查找后面不是exp2的exp1
　　负后顾：
　　(?<!exp2)exp1 查找前面不是exp2的exp1

　　再看一个小demo：
　　"好可爱".replace(/(?<=好)可爱/, "可爱的我") // 匹配"好可爱"中的"可爱"，将其替换为"可爱的我"，结果为"好可爱的我"
　　"不可爱".replace(/(?<=好)可爱/, "可爱的我") // 结果为"不可爱"，因为"可爱"前面不是"好"，所以无法匹配到

。。。。不小心点了发布，未完待续，上文还不够详尽。

页面显示的数据千分位处理，包括echart数据千分位处理（将数据每三位用逗号分隔）

相关推荐