文章摘要
这篇文章介绍了多种方法来处理数字的小数位数，使其在前端开发中更简洁统一。以下是文章的核心总结：
1. **toFixed() 方法**：将数字转换为字符串，并保留指定的小数位数。如果未指定参数，默认为0位小数。例如：
```javascript
let num = 3.1415;
num = num.toFixed(2); // "3.14"
```
2. **Math.floor() 方法**：向下取整数字，例如：
```javascript
let num = 3.1415;
num = Math.floor(num * 100) / 100; // 3.14
```
3. **substring() + indexOf() 方法组合**：提取字符串中的字符。例如：
```javascript
let num = 3.1415;
let str = num.toString();
let pos = str.indexOf('.');
let substring = str.substring(0, pos + 3); // "3.141"
```
4. **强制保留两位小数**：通过`toFixed(2)`或自定义方法（如四舍五入后补零）实现。例如：
```javascript
let num = 3;
num = num.toFixed(2); // "3.00"
```
5. **四舍五入保留两位小数**：如果第二位小数为0，则保留一位小数。例如：
```javascript
let num = 3.1001;
num = Math.round(num * 100) / 100; // 3.1
```
6. **正则表达式处理**：通过`/^d+(?:.d{0,2})?/`匹配数字的小数部分，确保格式统一。例如：
```javascript
let num = 3.1415;
let str = num.toString().match(/^d+(?:.d{0,2})?/); // "3.14"
```
文章通过这些方法展示了如何快速处理数字的小数位数，确保数据展示更规范，提升开发效率。
目录前言1. toFixed() 方法2. Math.floor() 方法3. 字符串+正则匹配4. 强制保留2位小数（例如3.00）5. 四舍五入保留2位小数（若第二位小数为0，则保留一位小数）6. substring()方法 + indexOf()方法拓展总结
日常开发中，后台会返给我们各式各样的数据，如果后台给你返回如下数据时，是不是就已经压制不住心中的怒火了，别急，其实前端处理这些数据还是非常简单的，下面用最简单的方法教你如何1分钟处理好这些数据。
返回数据示例：
3.1415926535897
85.452655625313
99.128532659596话不多说，下面直接进入实战
方法用于把数字转换为字符串，结果的小数点后有指定位数的数字。
参数描述x必需的参数。规定小数的位数，可取 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。实例
let numBer=3.1415926;
numBer=numBer.toFixed(2);
console.log(numBer); // 3.14
注意：
该方法会将数值四舍五入，例如 经过 方法得到的结果将是 且 方法会改变数据类型为字符串。
方法返回小于或等于一个给定数字的最大整数，可以理解 为向下取整；其相对的是 ，此方法是向上取整。
参数描述x必需的参数。任意数值或表达式。实例
let numBer=3.1415926;
numBer=Math.floor(numBer * 100) / 100;
console.log(numBer); // 3.14
注意：
该方法不会修改原有数据类型。
实例
let numBer=3.1415926;
numBer=Number(numBer.toString().match(/^\d+(?:\.\d{0,2})?/));
console.log(numBer);// 3.14
实例
let numBer=3;
numBer=this.numWay(numBer);// 调用numWay方法
console.log(numBer); // 3.00
方法代码
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;
},
},
实例
let numBer=3.1001;
numBer=this.numDelivery(numBer);// 调用numDelivery方法
console.log(numBer); // 3.1
方法代码
methods: {
numDelivery(num) {
var result=parseFloat(num);
if (isNaN(result)) {
alert(“传递参数错误，请检查！”);
return false;
}
result=Math.round(num * 100) / 100;
return result;
},
},
方法用于提取字符串中介于两个指定下标之间的字符。返回的子串包括 开始 处的字符，但不包括 结束 处的字符
参数描述from必需的参数。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。to非必需的参数。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 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保留两位小数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:js保留两位小数方法总结javascript实现保留两位小数的多种方法JS格式化数字保留两位小数点示例代码js浮点数保留两位小数点示例代码(四舍五入)js实现四舍五入完全保留两位小数的方法JavaScript如何实现对数字保留两位小数一位自动补零JS保留两位小数 四舍五入函数的小例子js保留两位小数使用toFixed实现JS保留两位小数,多位小数的示例代码javascript保留两位小数的实现方法你了解吗