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

    。。。。不小心点了发布,未完待续,上文还不够详尽。
  • 相关阅读:
    201871010106丁宣元 《面向对象程序设计(java)》第八周学习总结
    201871010106丁宣元 《面向对象程序设计(java)》第十一周学习总结
    201871010106丁宣元 《面向对象程序设计(java)》第十周学习总结
    学习:数据结构树状数组
    学习:数据结构线段树
    学习:数据结构哈希
    学习:数据结构单调栈
    学习:数学欧拉定理与扩展欧拉定理
    CRUD全栈式编程架构之导入导出的设计
    CRUD全栈式编程架构之服务层的设计
  • 原文地址:https://www.cnblogs.com/nuonuo-D/p/10929500.html
Copyright © 2011-2022 走看看