页面显示的数据千分位处理,包括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(/(?<=好)可爱/, "可爱的我") // 结果为"不可爱",因为"可爱"前面不是"好",所以无法匹配到

。。。。不小心点了发布,未完待续,上文还不够详尽。
posted @ 2019-06-03 10:29  几何柒期  阅读(4399)  评论(0编辑  收藏  举报