如何使用 JavaScript 檢查數字是否有小數位或是否是整數?


在本教程中,我們將討論如何使用 JavaScript 檢查數字是小數還是整數。在 JavaScript 中,我們可以使用內建方法以及使用者自定義方法來檢查數字是否有小數位或是否是整數。我們將詳細討論所有這些方法。讓我們看看可以使用哪些方法來完成此任務。

以下方法對於檢查數字是小數還是整數非常有用:

  • 使用 Math.floor() 方法.

  • 使用 isInteger() 方法.

  • 使用 isDecimal() 使用者自定義函式.

讓我們逐一詳細討論以上所有方法,並附帶程式碼示例:

使用 Math.floor() 方法

floor() 方法是 JavaScript 中Math物件的內建方法。floor 方法將數字作為引數,如果傳入的數字是小數,則返回該數字的較低值或底值。因此,我們可以將給定的數字與 floor 方法返回的底值進行比較,如果這兩個值相同,則該數字為整數,否則該數字是小數。

語法

以下語法用於在 JavaScript 中實現 Math 物件的 floor() 方法:

Math.floor(value);

讓我們在檢查數字是整數還是小數時,瞭解 floor 方法的實際實現。

示例

以下示例將說明使用Math.floor()方法檢查數字:

<!DOCTYPE html>
<html>
<body>
   <p>Enter a number below and click "Click to check" button to check if number has a decimale place or it's a whole number.</p>
   <input type="number" id="input">
   <p id="result"></p>
   <button onclick="check()">Click to check</button>
   <script>
      var result = document.getElementById("result");
      var inp = document.getElementById("input");
      function check() {
         var num = inp.value;
         var number = Number(num);
         if (number === Math.floor(number)) {
            result.innerHTML = number + " is a whole number.";
         } else {
            result.innerHTML = number + " is a decimal number.";
         }
      }
   </script>
</body>
</html>

在上面的示例中,我們使用了Math.floor()方法來檢查數字是整數還是小數。

使用isInteger() 方法

isInteger() 方法是 JavaScript 中 Number 物件的內建方法。isInteger() 方法接受一個數字並檢查該數字是否為整數。如果數字是整數,則返回 true,否則返回 false。

語法

以下語法用於實現 Number 物件的isInteger()方法:

Number.isInteger(value);

讓我們使用程式碼示例瞭解isInteger()方法的實際實現。

示例

下面的程式碼示例將解釋如何使用 isInteger() 方法檢查值:

<!DOCTYPE html>
<html>
<body>
   <h3>Check if a number has a decimal place or it’s a whole number</h3>
   <p>Enter a number and click the below button</p>
   <input type="number" id="input">
   <p id="result"></p>
   <button onclick="check()">Click to check</button>
   <script>
      var result = document.getElementById("result");
      var inp = document.getElementById("input");
      function check() {
         var num = inp.value;
         var number = Number(num);
         if (Number.isInteger(number)) {
            result.innerHTML = "<b> The given number " + number + " is a whole number not a decimal number. </b>";
         } else {
            result.innerHTML = "<b> The given number " + number + " is a decimal number not a whole number. </b>";
         }
      }
   </script>
</body>
</html>

在上面的示例中,我們使用了isInteger()方法來檢查數字是整數還是小數,我們可以看到程式碼正在執行。

使用isDecimal() - 使用者自定義函式

在 JavaScript 中,我們可以定義我們自己的方法來檢查使用者輸入的數字是小數還是整數。在此方法中,我們將透過將數字除以 1 來檢查它,如果它被 1 完全整除,則函式將返回值為 0,並且該數字為整數。否則,該數字是小數。

語法

以下語法將詳細說明如何將數字除以 1 來檢查它是整數還是小數:

var varName = number;
var check = varName % 1;

讓我們透過程式碼示例瞭解如何實際實現 isDecimal() 方法。

演算法

  • 步驟 1 - 在第一步中,我們將定義一個型別為數字的輸入標籤,以獲取使用者的數字輸入。

  • 步驟 2 - 在此步驟中,我們將定義isDecimal()方法,該方法將輸入數字作為引數,如果數字是小數則返回 true,否則返回 false。

  • 步驟 3 - 在下一步中,我們將為與按鈕關聯的 onclick 事件定義回撥函式。

  • 步驟 4 - 在最後一步中,我們將編寫回調函式的邏輯,並在其中使用isDecimal()方法來檢查數字是小數還是整數。

示例

下面的示例是上述演算法的程式碼實現,解釋了isDecimal()如何檢查輸入數字是小數還是整數:

<!DOCTYPE html>
<html>
<body>
   <h2>Checking using the isDecimal() method.</h2>
   <p>Enter a number and check if a number has a decimal place or it’s a whole number</p>
   <input type="number" id="input">
   <p id="result"></p>
   <button onclick="check()">Click to check</button>
   <script>
      var result = document.getElementById("result");
      var inp = document.getElementById("input");
      function isDecimal(num) {
         return (num % 1);
      }
      function check() {
         var num = inp.value;
         var number = Number(num);
         if (!isDecimal(number)) {
            result.innerHTML = "<b> The given number " + number + " is a whole number not a decimal number. </b>";
         } else {
            result.innerHTML = "<b> The given number " + number + " is a decimal number not a whole number. </b>";
         }
      }
   </script>
</body>
</html>

在此示例中,我們使用了isDecimal()方法來檢查輸入數字是小數還是整數。我們在此示例中使用了Number()方法,這是因為我們從輸入標籤獲得的值預設情況下是字串形式,所以為了將其轉換為數字,我們使用了Number()方法。

因此,在本教程中,我們討論了三種檢查數字是小數還是整數的方法。我們已經透過實際實現這些方法,並輔以每個方法相關的程式碼示例來展示所有這些方法。每當您需要檢查數字是否有小數位或是否是整數時,都可以使用這些方法中的任何一種。

更新於:2022年11月25日

2萬+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

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