对数字、金额字段的判空不能直接使用 if(value)
因为if(0) === false
。
应用场景1:详情页
在详情页时,常常由将空字段显示 --
的需求,需要做判空。若直接使用value ? value : '--'
,则在字段是number
类型,且恰巧为0
时,会错误的显示为--
。
使用
value !== null && value !== undefined
代替
金额千分位展示,表格中以小数点对齐靠右展示
- 首先要确认下金额小数点位数,一般余额、发生额展示两位,但是净价等都不止两位
- 千分位转换有
formatMoney
公共方法可以使用,支持指定小数位数,若不指定默认填充两位小数 - AgGrid靠右展示在
colDef
对应列中添加cellStyle: { 'text-align': 'right' }
属性
实现小细节
- AgGrid中金额千分位转换使用
cellRendererFramework
而不是valueFormatter
,若使用后者,当用户使用agGrid导出功能时,导出的金额字段也会变成千分位格式的字符串,不利于使用。
使用decimal.js
库对金额进行计算
JavaScript的浮点数运算、大数运算有精度问题,若需要在前端进行金额的运算,一定不能直接使用加减乘除运算符计算,统一使用decimal.js
库。
容易出现金额精度丢失的情况
- 大于等于
99999999999999.99
时- 整数位加小数位超过16位时
自检:
- 查询接口
当前台需要展示的字段中包含金额等字段,须与后台开发人员约定将此字段序列化为字符串再返回给前台。因为,目前封装的API
组件在接收接口返回数据时,会使用json.parse
将接收到的json字符串转换为JavaScript对象,在对number类型的转换过程中会产生精度丢失。- 新增、编辑
自测输入最大边界值的场景- 金额运算
自测运算数很大的情况下,计算结果是否正确