如何在 JavaScript 中格式化浮點數？

在本教程中，我們將學習如何使用 JavaScript 將浮點數格式化成所需的格式。格式化浮點數意味著將數字四捨五入到指定的十進位制位數。我們將詳細討論以下各種方法：

  • Math.round() 方法

  • Math.floor() 方法

  • Math.ceil() 方法

  • toFixed() 方法

  • toPrecision() 方法

Math.round() 方法

Math.round() 方法將數字四捨五入到最接近的整數。我們可以使用此方法將數字四捨五入到最接近的整數，也可以保留一些小數位。要保留小數位，請將數字乘以 10 的小數位次冪，然後四捨五入，最後再除以 10 的小數位次冪。

語法

以下是使用 Math.round() 方法格式化浮點數的語法：

Math.round(num) // format to nearest integer
let n = 10**d ;
Math.round(num*n)/n // format to d decimal place.

這裡 num 是要格式化為 d 個小數位的浮點數。

演算法

  • 步驟 1 - 宣告一個變數並將浮點數賦值給該變數。
  • 步驟 2 - 應用 Math.round() 方法來格式化浮點數。
  • 步驟 3 - 在使用者螢幕上顯示結果。

示例 1

將浮點數格式化為最接近的整數。

在下面的示例中，我們使用 Math.round() 方法將浮點數格式化為最接近的整數。

<html>
<body>
   <h3>JavaScript Math.round() Method</h3>
   <p>format a float to nearest integer.</p>
   <p id="result">final result:<br></p>
   <script>
      var number = 4.8754;
      var roundNum = Math.round(number);
      document.getElementById("result").innerHTML = "Math.round(4.8754) = " + roundNum;
   </script>
</body>
</html>

在上面的程式中，我們使用了 Math.round() 方法，該方法將數值表示式四捨五入到最接近的整數。4.8754 將向下舍入為 5。

示例 2

保留 n 個小數位的浮點數。

在下面的示例中，我們使用 Math.round() 方法將浮點數格式化為保留 n 個小數位。我們將數字格式化為保留一位、兩位和五位小數。

<html>
<body>
   <h3>JavaScript Math.round() Method</h3>
   <p>Format the float with n decimals</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result")
      const number = 9.1931754;
      const roundNum = Math.round(number*10)/10;
      resultDiv.innerHTML += "With 1 decimal: " + roundNum;
      resultDiv.innerHTML += "<br>With 2 decimals: " + Math.round(number*100)/100;
      resultDiv.innerHTML += "<br>With 5 decimals: " + Math.round(number*100000)/100000;
   </script>
</body>
</html>

Math.floor() 方法

Math.floor() 方法返回小於或等於其引數的最大整數。我們可以使用此方法將浮點數格式化為最接近的整數或保留一些小數位。

語法

以下是使用 Math.floor() 方法格式化浮點數的語法：

Math.floor(num) // format to greatest integer less than or equal to num.
let n = 10**d ;
Math.floor(num*n)/n // format to d decimal place.

這裡 num 是要格式化為 d 個小數位的浮點數。

示例 3

在下面的示例中，我們將浮點數格式化為小於或等於該浮點數的最大整數，並保留一位和小數位。我們使用 Math.floor() 方法來格式化浮點數。

<html>
<body>
   <h3>JavaScript Math.floor() Method</h3>
   <p>Format a float (3.31754) with n decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      var number = 3.31754;
      var floorNum = Math.floor(number);
      resultDiv.innerHTML += "To nearest integer: " + floorNum;
      resultDiv.innerHTML += "<br>With 1 decimal: " + Math.floor(number*10)/10;
      resultDiv.innerHTML += "<br>With 3 decimals : " + Math.floor(number*1000)/1000;
   </script>
</body>
</html>

Math.ceil() 方法

Math.ceil() 方法返回大於或等於浮點數的最小整數。我們應該應用此方法來格式化浮點數保留一些小數位，以及格式化為大於或等於浮點數的最小整數。

語法

以下是使用 Math.ceil() 方法格式化浮點數的語法：

Math.ceil(num) // format to smallest integer greater than or equal to num.
let n = 10**d ;
Math.ceil(num*n)/n // format to d decimal place

這裡 num 是要格式化為 d 個小數位的浮點數。

示例 4

在下面的示例中，我們將浮點數格式化為大於或等於該浮點數的最小整數，並保留一位和小數位。我們使用 Math.ceil() 方法來格式化浮點數。

<html>
<body>
   <h3>JavaScript Math.ceil() Method</h3>
   <p>Format a float (3.31754) with n decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      var number = 3.31754;
      var floorNum = Math.ceil(number);
      resultDiv.innerHTML += "To nearest integer: " + floorNum;
      resultDiv.innerHTML += "<br>With 1 decimal: " + Math.ceil(number*10)/10;
      resultDiv.innerHTML += "<br>With 3 decimals : " + Math.ceil(number*1000)/1000;
   </script>
</body>
</html>

請注意示例 3 和示例 4 中輸出結果的差異。

Number toFixed() 方法

Number toFixed() 方法將數字四捨五入到指定的十進位制位數。它將數字轉換為字串。如果小數位數高於數字本身，它會新增零。

語法

以下是使用 toFixed() 方法格式化浮點數並指定小數位的語法：

num.toFixed(n);

這裡浮點數 num 將格式化為 n 個小數位。如果引數 n 未提供，則 num 將格式化為 最接近的整數。

示例 5

在下面的示例中，我們使用 toFixed() 方法將 8.131754 格式化為指定的小數位。

<html>
<body>
   <h2>JavaScript Number toFixed() Method</h2>
   <p>Format 8.131754 to secified decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      const number = 8.131754;
      var fixedNum = number.toFixed();
      resultDiv.innerHTML += "number.toFixed() = " + fixedNum;
      resultDiv.innerHTML += "<br>number.toFixed(1) = " + number.toFixed(1);
      resultDiv.innerHTML += "<br>number.toFixed(2) = " + number.toFixed(2);
      resultDiv.innerHTML += "<br>number.toFixed(3) = " + number.toFixed(3);
      resultDiv.innerHTML += "<br>number.toFixed(5) = " + number.toFixed(5);
      resultDiv.innerHTML += "<br>number.toFixed(10) = " + number.toFixed(10);
   </script>
</body>
</html>

Number toPrecision() 方法

Number toPrecision() 方法用於將數值表示式格式化到一定的長度。

語法

以下是 toPrecision() 方法的語法：

num.toPrecision(l);

這裡 num 將格式化為指定長度 l。

示例 6

在下面的示例中，我們使用 toPrecision() 方法將 8.131754 格式化為指定的小數位。

<html>
<body>
   <h2>JavaScript Number toPrecision() Method</h2>
   <p>Format 8.131754 to secified decimals:</p>
   <p id="result"></p>
   <script>
      let resultDiv = document.getElementById("result");
      const number = 8.131754;
      var fixedNum = number.toPrecision();
      resultDiv.innerHTML += "number.toPrecision() = " + fixedNum;
      resultDiv.innerHTML += "<br>number.toPrecision(1) = " + number.toPrecision(1);
      resultDiv.innerHTML += "<br>number.toPrecision(2) = " + number.toPrecision(2);
      resultDiv.innerHTML += "<br>number.toPrecision(3) = " + number.toPrecision(3);
      resultDiv.innerHTML += "<br>number.toPrecision(5) = " + number.toPrecision(5);
      resultDiv.innerHTML += "<br>number.toPrecision(10) = " + number.toPrecision(10);
   </script>
</body>
</html>

在本教程中，我們討論了五種將浮點數格式化到指定小數位的方法。當我們將浮點數格式化為指定小數位時，Math.round()、floor() 和 ceil() 方法的工作方式相似。您可以使用 floor() 和 ceil() 方法清楚地看到結果的差異。Number toFixed() 和 toPrecision() 方法的工作方式相似，但您可以在這兩種方法的結果中看到明顯的差異。

更新於：2022年9月5日

5K+ 次瀏覽

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.