使用js,对数值保留小数点后两位的处理(两种情况)
JS 使用 处理 情况 两种 保留 数值 两位
2023-06-13 09:11:28 时间
大家好,又见面了,我是你们的朋友全栈君。
Html部分:
<div class="text primary-text">
<span>合计:</span>
<span class="money">{
{totalMoney | numFilter}}</span>
</div>
Js部分:(注意toFixed方法只能用于数值型数据)
// 情况一:保留小数点后两位的过滤器,尾数四舍五入
filters: {
numFilter (value) {
let realVal = ''
if (!isNaN(value) && value!== '') {
// 截取当前数据到小数点后两位
realVal = parseFloat(value).toFixed(2)
} else {
realVal = '-'
}
return realVal
}
}
// 情况二:保留小数点后两位的过滤器,尾数不四舍五入(此处存在一个问题,当源数据小数点第三位为数字9,并且第四位会导致第三位进位的情况下,得到的最终数据仍然不是截取 eg: 3.1798 截取两位会变成3.18)
filters: {
numFilter (value) {
let realVal = ''
if (!isNaN(value) && value!== '') {
// 截取当前数据到小数点后三位
let tempVal = parseFloat(value).toFixed(3)
realVal = tempVal.substring(0, tempVal.length - 1)
} else {
realVal = '-'
}
return realVal
}
}
// 情况二:优化成如下方式,自行封装成一个公共函数,即用即调
filters: {
numFilter (value) {
return cutOutNum(value)
}
}
----- 将此函数封装在外部js中 -----
/**
* 对源数据截取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
}
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143256.html原文链接:https://javaforall.cn
相关文章
- 【说站】js构造函数的使用注意
- Js排序算法_js 排序算法
- Node.JS 学习记录(01)
- js 怎么使用正则表达式-JavaScript 正则表达式
- 刷完15道js版dp题,面试再也不怕了2
- 客服系统切换中英文多语言 - 使用js更新URL参数来实现切换 【唯一客服】网站网页客服源码教程
- Node.js与MySQL的卓越结合(nodemysql)
- 使用Node.js连接MSSQL数据库实现高效数据管理(nodejsmssql)
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- Code:loadScript()加载js的功能函数
- javascript(js)join函数使用方法介绍
- CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
- JS非图片动态loading效果实现代码
- js文件引入实现代码
- JS图片无缝滚动(简单利于使用)
- 使用ImageMagick进行图片缩放、合成与裁剪(js+python)
- js中的布尔运算符使用介绍
- js中document.write使用过程中的一点疑问解答
- JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
- 使用js实现数据格式化
- 使用不同的方法结合/合并两个JS数组