Since I am responsible for the payment system in the near future, there will be a lot of numerical amounts involved, and there will be more formatting. I searched a lot, but the effect is not good, and the hard work pays off. Code, I hope it can help you.
Requirement: Separate three digits of the amount involved with a comma, and keep two decimal places
Approach:
1. In the utils directory of the vue project, create a new defined.js file as a module export,
2. Introduce in vue, use filter
// 引入格式化函数
import {
cutMoneyFiter } from '@/utils/defined';
// 使用过滤器方法，
filters: {
cutMoneyFiter
},
// 模板使用：格式化方法处理
<span class="amount">{
{
forn.accout | cutMoneyFiter }}</span>
3. Implement the defined.js code as follows:
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;
}
For the record: the formatting function is similar (not related to the above)
Function : The processing method of intercepting the specified number of digits in formatting.
The code is as follows:
/**
* 对源数据截取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
}
More content to be continued,