vue金额类格式化之逗号分隔三位且保留两位小数

由于近期负责支付系统方面，所以涉及的数值金额方面的会很多，需要格式化的也就多了，找了一大圈，效果不佳，功夫不负有心人还是解决了，下面记录一下实现方法和代码，希望对你有帮助。

需求：把涉及数值金额用逗号分隔三位，且需要保留两位小数

处理方法：

1，在vue项目utils目录中，新建一个defined.js文件作为模块导出，

2，在vue引入，使用过滤器

// 引入格式化函数
import { cutMoneyFiter } from '@/utils/defined';


// 使用过滤器方法，
 filters: {
      cutMoneyFiter
},

// 模板使用：格式化方法处理
<span class="amount">{{ forn.accout  | cutMoneyFiter }}</span>

3，实现defined.js代码如下：

export const cutMoneyFiter = (amount) => {
	if(!amount) {
		return "-"
	}
	//强制保留两位小数
	let f = parseFloat(amount);
	if (isNaN(f)) return false;
		f = Math.round(amount * 100) / 100;
	let s = f.toString();
	let rs = s.indexOf('.');
	if (rs < 0) {
		rs = s.length;
		s += '.';
	}
	while (s.length < (rs + 1) + 2) {
		s += '0';
	}
	//每三位用一个逗号隔开
	let leftNum=s.split(".")[0];
	let rightNum="."+s.split(".")[1];
	let result;
	//定义数组记录截取后的价格
	let resultArray=new Array();
	if(leftNum.length>3){
		let i=true;
		while (i){
			resultArray.push(leftNum.slice(-3));
			leftNum=leftNum.slice(0,leftNum.length-3);
			if(leftNum.length<4){
				i=false;
			}
		}
		//由于从后向前截取，所以从最后一个开始遍历并存到一个新的数组，顺序调换
		let sortArray=new Array();
		for(let i=resultArray.length-1;i>=0;i--){
			sortArray.push(resultArray[i]);
		}
		result=leftNum+","+sortArray.join(",")+rightNum;
	}else {
		result=s;
	}
	return result;
}

记录：格式化功能类似（与上文无关）

作用：格式化之截取指定位数处理方法
代码如下：

/**
 * 对源数据截取decimals位小数，不进行四舍五入
 * @param {*} num 源数据
 * @param {*} decimals 保留的小数位数
 */
 export const cutOutNum = (num, decimals = 2) => {
	if (isNaN(num) || (!num && num !== 0)) {
	  return '-'
	}
   
	function toNonExponential (_num) {
	  var m = Number(_num).toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/)
	  return Number(_num).toFixed(Math.max(0, (m[1] || '').length - m[2]))
	}
   
	// 为了兼容科学计数法的数字
	num = toNonExponential(num)
	// 获取小数点的位置 + 1（不存在小数点的indexOf值为-1）
	const pointIndex = String(num).indexOf('.') + 1
	// 获取小数点后的个数(需要保证有小数位)
	const pointCount = pointIndex ? String(num).length - pointIndex : 0
   
	// 补零函数
	function zeroFill (zeroNum, num) {
	  for (let index = 0; index < zeroNum; index++) {
		num = `${num}0`
	  }
	  return num
	}
   
	// 源数据为"整数"或者小数点后面小于decimals位的作补零处理
	if (pointIndex === 0 || pointCount <= decimals) {
	  let tempNumA = num
	  // 区分"整数"和"小数"的补零
	  if (pointIndex === 0) {
		tempNumA = `${tempNumA}.`
		tempNumA = zeroFill(decimals - pointCount, tempNumA)
	  } else {
		tempNumA = zeroFill(decimals - pointCount, tempNumA)
	  }
	  return String(tempNumA)
	}
   
	// 截取当前数据到小数点后decimals位
	const Int = String(num).split('.')[0]
	const Decimal = String(num).split('.')[1].substring(0, decimals)
	const tempNumB = `${Int}.${Decimal}`
   
	// 需求：数据为0时，需要显示为0，而不是0.00...
	return Number(tempNumB) === 0 ? 0 : tempNumB
  }

更多内容待续，，