js保留两位小数最简单的实现方法
更新时间：2023年05月13日 09:40:56 作者：水星记_
JS数据格式化是在进行web前端开发时常碰到的事情,特别是在数据类型为Float的数据就需要特殊处理,如保留两位小数、小数点后的数据是否需要四舍五入等等,下面这篇文章主要给大家介绍了关于js保留两位小数最简单的实现方法,需要的朋友可以参考下
前言
日常开发中，后台会返给我们各式各样的数据，如果后台给你返回如下数据时，是不是就已经压制不住心中的怒火了，别急，其实前端处理这些数据还是非常简单的，下面用最简单的方法教你如何1分钟处理好这些数据。
返回数据示例：
3.1415926535897
85.452655625313
99.128532659596
话不多说，下面直接进入实战
1. toFixed() 方法
toFixed() 方法用于把数字转换为字符串，结果的小数点后有指定位数的数字。
| 参数 | 描述 |
|---|---|
| x | 必需的参数。规定小数的位数，可取 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。 |
实例
let numBer = 3.1415926; numBer = numBer.toFixed(2); console.log(numBer); // 3.14
注意：
该方法会将数值四舍五入，例如 3.148 经过 toFixed(2) 方法得到的结果将是 3.15 且 toFixed() 方法会改变数据类型为字符串。
2. Math.floor() 方法
Math.floor() 方法返回小于或等于一个给定数字的最大整数，可以理解 Math.floor() 为向下取整；其相对的是 Math.ceil()，此方法是向上取整。
| 参数 | 描述 |
|---|---|
| x | 必需的参数。任意数值或表达式。 |
实例
let numBer = 3.1415926; numBer = Math.floor(numBer * 100) / 100; console.log(numBer); // 3.14
注意：
该方法不会修改原有数据类型。
3. 字符串+正则匹配
实例
let numBer = 3.1415926;
numBer = Number(numBer.toString().match(/^\d+(?:\.\d{0,2})?/));
console.log(numBer);// 3.144. 强制保留2位小数（例如3.00）
实例
let numBer = 3; numBer = this.numWay(numBer);// 调用numWay方法 console.log(numBer); // 3.00
methods 方法代码
methods: {
numWay(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return false;
}
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf(".");
if (rs < 0) {
rs = s.length;
s += ".";
}
while (s.length <= rs + 2) {
s += "0";
}
return s;
},
},5. 四舍五入保留2位小数（若第二位小数为0，则保留一位小数）
实例
let numBer = 3.1001; numBer = this.numDelivery(numBer);// 调用numDelivery方法 console.log(numBer); // 3.1
methods 方法代码
methods: {
numDelivery(num) {
var result = parseFloat(num);
if (isNaN(result)) {
alert("传递参数错误，请检查！");
return false;
}
result = Math.round(num * 100) / 100;
return result;
},
},6. substring()方法 + indexOf()方法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。返回的子串包括 开始 处的字符，但不包括 结束 处的字符
| 参数 | 描述 |
|---|---|
| from | 必需的参数。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。 |
| to | 非必需的参数。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。 |
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回 -1。
| 参数 | 描述 |
|---|---|
| searchvalue | 必需的参数。规定需检索的字符串值。 |
| start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。 |
实例
let numBer = 3.1415926 + "";
var str = numBer.substring(0, numBer.indexOf(".") + 3);
console.log(str);// 3.14拓展
为了方便，我们可以写一个专门的方法，需要的时候调用即可。如下代码：
<template>
<div>
{{this.getValue(719.0721)}}
</div>
</template>
<script>
export default {
methods: {
getValue(val) {
return val.toFixed(2);
},
},
};
</script>页面展示
总结
到此这篇关于js保留两位小数最简单的实现方法的文章就介绍到这了,更多相关js保留两位小数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript判断表单提交时哪个radio按钮被选中的方法
这篇文章主要介绍了JavaScript判断表单提交时哪个radio按钮被选中的方法,实例分析了javascript操作表单radio按钮的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
本篇文章主要是对js日期对象兼容性的处理方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了js获取对象的属性值两种方式,在JavaScript中访问对象的属性值可以通过点运算符（.）或括号运算符（[]）两种方式,文中将两种方式的代码介绍的非常详细,需要的朋友可以参考下2024-10-10
DOM作用:用来修改网页内容,结构和样式,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透JavaScript中的DOM知识及用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼,这里不想谈太多的nodejs的相关信息。只说一下，windows系统下简单nodejs环境配置2013-01-01
在UniApp开发中,经常需要对数组进行操作,若要修改数组中特定下标外的所有元素,可通过map方法或for循环实现,map方法适用于生成新数组,for循环则直接修改原数组,根据项目需求选择最佳方案,需要的朋友可以参考下2024-09-09
现在说瀑布流式布局似乎有点晚了，但是每一项技术都是向着“精”和“简”的方向在不断发展，在发展到极致之前，需要一个相当漫长的过程，因此，从这个角度来说，当瀑布流被应用得越来越多的时候，反而更应该讨论它，讨论如何将它改善2013-11-11
这篇文章主要为大家详细介绍了微信小程序实现自定义picker选择器弹窗内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章介绍了JS自动适应的图片弹窗实例代码，有需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了微信小程序实现上传照片代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
最新评论