js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法

更新時(shí)間：2023年05月13日 09:40:56 作者：水星記_

JS數(shù)據(jù)格式化是在進(jìn)行web前端開發(fā)時(shí)常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點(diǎn)后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法,需要的朋友可以參考下

前言

日常開發(fā)中，后臺(tái)會(huì)返給我們各式各樣的數(shù)據(jù)，如果后臺(tái)給你返回如下數(shù)據(jù)時(shí)，是不是就已經(jīng)壓制不住心中的怒火了，別急，其實(shí)前端處理這些數(shù)據(jù)還是非常簡(jiǎn)單的，下面用最簡(jiǎn)單的方法教你如何1分鐘處理好這些數(shù)據(jù)。

返回?cái)?shù)據(jù)示例：

3.1415926535897
85.452655625313
99.128532659596

話不多說(shuō)，下面直接進(jìn)入實(shí)戰(zhàn)

1. toFixed() 方法

toFixed() 方法用于把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字。

參數(shù)	描述
x	必需的參數(shù)。規(guī)定小數(shù)的位數(shù)，可取 0 ~ 20 之間的值，包括 0 和 20，有些實(shí)現(xiàn)可以支持更大的數(shù)值范圍。如果省略了該參數(shù)，將用 0 代替。

實(shí)例

let numBer = 3.1415926;
numBer = numBer.toFixed(2);
console.log(numBer); // 3.14

注意：

該方法會(huì)將數(shù)值四舍五入，例如 3.148 經(jīng)過(guò) toFixed(2) 方法得到的結(jié)果將是 3.15 且 toFixed() 方法會(huì)改變數(shù)據(jù)類型為字符串。

2. Math.floor() 方法

Math.floor() 方法返回小于或等于一個(gè)給定數(shù)字的最大整數(shù)，可以理解 Math.floor() 為向下取整；其相對(duì)的是 Math.ceil()，此方法是向上取整。

參數(shù)	描述
x	必需的參數(shù)。任意數(shù)值或表達(dá)式。

實(shí)例

let numBer = 3.1415926;
numBer = Math.floor(numBer * 100) / 100;
console.log(numBer); // 3.14

注意：

該方法不會(huì)修改原有數(shù)據(jù)類型。

3. 字符串+正則匹配

實(shí)例

let numBer = 3.1415926;
numBer = Number(numBer.toString().match(/^\d+(?:\.\d{0,2})?/));
console.log(numBer);// 3.14

4. 強(qiáng)制保留2位小數(shù)（例如3.00）

實(shí)例

let numBer = 3;
numBer = this.numWay(numBer);// 調(diào)用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位小數(shù)（若第二位小數(shù)為0，則保留一位小數(shù)）

實(shí)例

let numBer = 3.1001;
numBer = this.numDelivery(numBer);// 調(diào)用numDelivery方法
console.log(numBer); // 3.1

methods 方法代碼

methods: {
  numDelivery(num) {
    var result = parseFloat(num);
    if (isNaN(result)) {
      alert("傳遞參數(shù)錯(cuò)誤，請(qǐng)檢查！");
      return false;
    }
    result = Math.round(num * 100) / 100;
    return result;
  },
},

6. substring()方法 + indexOf()方法

substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。返回的子串包括開始處的字符，但不包括 結(jié)束 處的字符

參數(shù)	描述
from	必需的參數(shù)。一個(gè)非負(fù)的整數(shù)，規(guī)定要提取的子串的第一個(gè)字符在 string Object 中的位置。
to	非必需的參數(shù)。一個(gè)非負(fù)的整數(shù)，比要提取的子串的最后一個(gè)字符在 string Object 中的位置多 1。如果省略該參數(shù)，那么返回的子串會(huì)一直到字符串的結(jié)尾。

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，如果沒有找到匹配的字符串則返回 -1。

參數(shù)	描述
searchvalue	必需的參數(shù)。規(guī)定需檢索的字符串值。
start	可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 string Object.length - 1。如省略該參數(shù)，則將從字符串的首字符開始檢索。

實(shí)例

let numBer = 3.1415926 + "";
var str = numBer.substring(0, numBer.indexOf(".") + 3);
console.log(str);// 3.14

拓展

為了方便，我們可以寫一個(gè)專門的方法，需要的時(shí)候調(diào)用即可。如下代碼：

<template>
  <div>
    {{this.getValue(719.0721)}}
  </div>
</template>
<script>
export default {
  methods: {
    getValue(val) {
      return val.toFixed(2);
    },
  },
};
</script>

頁(yè)面展示