js控制数字保留小数点后数据(为0不保存,不为0保存)

博客展示了JavaScript中parseFloat函数的使用示例,分别对整数1、小数1.1和1.0进行parseFloat转换操作,体现了该函数在不同数值类型下的转换结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var a = 1;   -- a = 1

var b = parseFloat(a);  -- b = 1

 

var a = 1.1;   -- a = 1.1

var b = parseFloat(a);  -- b = 1.1

 

var a = 1.0;   -- a = 1.0

var b = parseFloat(a);  -- b = 1

 

 

### Vue 中使用 `el-input` 组件实现千分位格式化并保留两位小数的方法 在 Vue 和 Element Plus(或旧版的 Element UI)中,可以通过自定义逻辑来实现在 `el-input` 输入框中显示带有千分位格式化的数值,并且确保该值的小数部分始终保留两位。以下是详细的解决方法。 --- ### 方法概述 为了满足需求,可以分为以下几个方面进行处理: 1. **输入内容的实时监听与校验**:通过 `@input` 或者 `watch` 来捕获用户输入的内容,并对其进行必要的清洗和格式化操作。 2. **前端展示与后端传输分离**:确保传递给后端的数据是一个标准的数字类型,而不是经过格式化后的字符串。 3. **光标位置保护**:在对输入框中的内容进行修改时,注意保存和恢复用户的光标位置,以免影响用户体验。 --- ### 实现代码 以下是一个完整的实现示例: #### HTML 部分 ```html <template> <div> <el-input v-model="displayValue" @input="formatInput($event)" placeholder="请输入数字" /> </div> </template> ``` #### JavaScript 部分 ```javascript <script> export default { data() { return { rawValue: null, // 后端使用的原始数值 displayValue: '', // 前端展示的带千分位格式的值 cursorPosition: 0 // 记录光标位置 }; }, methods: { formatInput(value) { // 保存当前光标位置 const inputElement = this.$refs.elInput?.$el.querySelector('input'); if (inputElement) { this.cursorPosition = inputElement.selectionStart; } let cleanedValue = value.replace(/,/g, ''); // 移除所有逗号 cleanedValue = cleanedValue.replace(/[^\d.]/g, ''); // 只允许数字和小数点 cleanedValue = cleanedValue.replace(/\.{2,}/g, '.'); // 处理连续的小数点 cleanedValue = cleanedValue.replace(/^\./, '0.'); // 如果首位是小数点则补充前导 cleanedValue = cleanedValue.match(/^\d*\.?\d{0,2}$/) ? cleanedValue : ''; // 确保最多两位小数 // 更新原始值 this.rawValue = parseFloat(cleanedValue); // 格式化为千分位表示法 if (cleanedValue.includes('.')) { const [integerPart, decimalPart] = cleanedValue.split('.'); this.displayValue = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '.' + decimalPart.padEnd(2, '0').slice(0, 2); } else { this.displayValue = cleanedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '.00'; } // 恢复光标位置 setTimeout(() => { if (inputElement && !isNaN(this.cursorPosition)) { inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition); } }, 0); } } }; </script> ``` --- ### 功能解析 1. **清理输入内容** - 使用正则表达式移除非数字字符以及多余的逗号[^1]。 - 确保小数点的数量超过一个,并且允许非法输入组合。 2. **转换为千分位格式** - 利用正则表达式 `\B(?=(\d{3})+(?!\d))` 插入千分位符号 `,`[^2]。 - 对整数部分应用千分位分割,同时保留小数部分固定为两位。 3. **前后端数据一致性** - 在内部存储未格式化的纯数字版本 (`rawValue`),用于后续提交给服务器。 - 显示层面上提供更友好的视觉效果 (`displayValue`)。 4. **光标位置管理** - 在每次更新输入框内容之前记录下当前光标的索引位置。 - 修改完成后利用 `setTimeout` 异步回调重新设置光标回到原先的位置。 --- ### 注意事项 - 此方案假设用户只会输入合法范围内的数值。如果存在恶意攻击或者极端情况下的异常输入,可能还需要额外增加边界条件判断。 - 浏览器兼容性问题也需要考虑清楚,尤其是涉及到一些较新的 ES 特性和 CSS 属性支持程度同的场景之下。 --- ### 总结 通过上述方式可以在 Vue 应用程序中轻松实现基于 `el-input` 的千分位格式化功能,既保证了良好的用户体验又兼顾到了服务端对接的要求。整个过程涉及到了正则匹配、字符串操作等多个知识点的应用实践。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值