如何在 JavaScript 中將數字舍入到小數點後一位?


在本教程中,我們將學習如何將數字舍入小數點後一位在 JavaScript 中。舍入浮點數並顯示小數點後特定位數的需求多種多樣。

在我們的例子中,我們只需要顯示小數點後一位數字。但是,在本教程結束時,我們將建立一個可自定義的手動函式,該函式可以將數字舍入並顯示小數點後特定數量的數字。

此示例讓使用者瞭解將數字舍入到單個小數位的基本需求。假設您正在為線上商店開發應用程式的場景,您需要顯示每個產品的價格,但在資料庫中,您已將價格儲存到小數點後五位。從資料庫中獲取產品價格後,您需要顯示到小數點後一位。在這種情況下,您必須找到解決問題的方法。

此外,在本教程中,我們有不同的方法來實現我們的目標。

  • 使用toFixed() 方法

  • 使用Math.round() 函式

使用toFixed() 方法

在這種方法中,我們將使用toFixed() 方法將數字舍入到小數點後一位。它接受一個引數;您希望在小數點後保留的位數。此外,即使您新增數字輸入,toFixed() 方法也會“返回字串輸出”。我們需要將字串輸出轉換為浮點數。

語法

使用者可以按照以下語法使用toFixed() 方法。

number.toFixed(decimal_digits);

引數

  • decimal_digits - 此引數接受表示您希望在小數點後保留的位數的數字輸入。在我們的例子中,我們將取 1 作為此引數。

示例

以下示例演示瞭如何使用toFixed() 方法將數字舍入到小數點後一位。如上所述,toFixed() 方法返回一個字串,因此我們將再次將返回的字串值轉換為浮點數。

<!DOCTYPE html>
<html>
   <body>
   <h2>Round a number to 1 decimal place in JavaScript</h2>
   <h4> After rounding the 103.72456 to 1 decimal place, output is </h4>
   <p id="output"> </p>
   <p id="previousType"> </p>
   <p id="AfterType"> </p>
   <script type="text/javascript">
      let output = document.getElementById("output");
      let previousType = document.getElementById("previousType");
      let AfterType = document.getElementById("AfterType");

      // rounding number to 1 decimal place using toFixed() method
      let number = 103.72456;
      let result = number.toFixed(1);
      output.innerHTML = result;
      previousType.innerHTML = " The type of output is: " + typeof result;
      result = parseFloat( result );
      AfterType.innerHTML = " The type of the output after converting to float is " + typeof result;
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到使用toFixed() 方法將數字舍入到小數點後一位後的輸出型別是一個字串。之後,我們使用parseFloat() 函式將輸出轉換為浮點數。

使用 Math.round() 函式

在這種方法中,我們將使用 JavaScript 數學庫中的Math.round() 函式。Math.round() 函式將數字舍入到最接近的數字,但我們將應用一些精確的邏輯來僅將數字舍入到一位。

我們可以將數字乘以 10 並應用round() 函式。之後,我們可以再次將舍入後的數字除以 10,這樣我們就可以實現我們的目標。

使用者可以使用此示例理解上述方法。例如,我們想將數字 10.34532 舍入到小數點後一位。讓我們將數字乘以 10,它變成 103.4532。現在,如果我們應用 round 函式,我們只得到結果 103。接下來,將數字除以 10,數字變成 10.3,我們得到了正確的結果。

語法

let result = Math.round(number*10)/10;

示例

在下面的示例中,我們建立了一個舍入函式,以便使用者可以根據自己的需要自定義它。我們的函式接受 2 個引數,一個是您想要舍入的數字,另一個是您想要在小數點後保留的位數。

<!DOCTYPE html>
<html >
   <body>
   <h2>Round a number to 1 decimal place in JavaScript</h2>
   <p> Result after rounding the 81.43426 to 1 decimal place using the Math.Round() method − </p>
   <p id="output"> </p>
   <script>
      let output = document.getElementById( "output" );

      // customizable function to round number to any decimal place
      function roundNumber(number, decimal_digit) {
         let powerOften = Math.pow( 10, decimal_digit );
         let result = Math.round( number * powerOften ) / powerOften;
         output.innerHTML = result;
      }
      let number = 81.43426;
      roundNumber(number, 1);
   </script>
</body>
</html>

在上面的示例中,我們傳遞了 1 作為decimal_digit 引數的值。因此,我們將得到 101 = 10,並且Math.round() 函式將數字舍入到小數點後一位。

如果使用者想要將數字舍入到 n 位小數,他們將傳遞 n 作為decimal_digit 值,並且作為 10 的冪,他們得到 10n,並且Math.round() 函式將數字舍入到 n 位小數。

結論

在本教程中,我們使用了兩種方法將數字舍入到小數點後一位。第一種方法不太好,因為它返回字串,您需要再次將其轉換為浮點數。第二種方法是有益的,因為它即使可以將數字舍入到 n 位小數也是可自定義的。

更新於: 2022-07-14

26K+ 瀏覽量

開啟您的職業生涯

透過完成課程獲得認證

立即開始
廣告
© . All rights reserved.