页面显示的数据千分位处理,包括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(/(?<=好)可爱/, "可爱的我") // 结果为"不可爱",因为"可爱"前面不是"好",所以无法匹配到
。。。。不小心点了发布,未完待续,上文还不够详尽。
(*╹▽╹*)几何柒期的blog