JavaScript 中的小於運算子 (<) 是什麼？

小於運算子屬於二元運算子，這意味著它需要兩個運算元才能進行運算。如果運算子左側的運算元小於右側的運算元，則返回 true；否則返回false。小於運算子屬於比較運算子，用於比較兩個值。在本教程中，我們將討論 JavaScript 中的小於運算子及其在不同情況下的工作原理，並輔以程式碼示例。

語法

以下語法將展示如何使用小於運算子來檢查兩個運算元中哪個較小：

val1 < val2
// it will return true if val1 is small, else return false.

讓我們透過在程式碼示例中實現它來實際瞭解小於運算子的工作原理。

演算法

步驟 1 - 在演算法的第一步，我們將定義兩個數字型別的輸入元素，以數字形式從使用者處獲取兩個輸入。

步驟 2 - 在下一步中，我們將定義一個按鈕，一旦使用者點選它，它將向用戶顯示小於運算子的結果，因為它包含 onclick 事件及其關聯的回撥函式。

步驟 3 - 在第三步中，我們將宣告上一步中宣告的按鈕的 onclick 事件將使用的回撥函式。

步驟 4 - 在最後一步中，我們將使用value屬性獲取使用者在輸入欄中輸入的輸入，然後使用 Number() 方法將其轉換為數字，之後我們將對這些輸入進行小於運算子運算。

示例 1

下面的示例將向您展示當兩個輸入都為數字時小於運算子的工作原理：

<!DOCTYPE html>
<html>
<body>
   <h2> Less than Operator (<) in JavaScript </h2>
   <p> Enter two numbers below to perform less than operation </p>
   <input type = "number" id = "inp1" value = 22> <br> <br>
   <input type = "number" id = "inp2" value = 33 >
   <p> Click to see the result of less than Operator (<) of above two numbers. </p>
   <p id = "result"></p>
   <button onclick = "display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var val1 = Number(inp1.value);
         var inp2 = document.getElementById("inp2");
         var val2 = Number(inp2.value);
         var rem = val1 < val2;
         result.innerHTML += " <b> Is " + val1 + " less than " + val2 + " : " + rem + " </b> <br> ";
      }
   </script>
</body>
</html>

在上面的示例中，我們看到小於運算子按預期工作。因為它如果左側運算數小於右側運算數則返回 true，否則返回 false。

讓我們再看一個例子，其中一個數字將與一個字串進行比較。

演算法

此示例的演算法與之前的演算法幾乎相同。您只需要將任何一個輸入元素的型別更改為文字並刪除該特定輸入值的Number()方法。

示例 2

下面的示例說明了如果輸入的資料型別不同（即數字和字串），小於運算子的工作原理：

<!DOCTYPE html>
<html>
<body>
   <h2> Less than Operator (<) in JavaScript </h2>
   <p> Enter two numbers:</p>
   <input type = "text" id = "inp1" value = 2> <br> <br>
   <input type = "number" id = "inp2" value =3>
   <p> Click to see the result of less than Operator (<) of above two inputs. </p>
   <p id = "result"></p>
   <button onclick = "display()"> Show Result </button>
   <script>
   var result = document.getElementById("result");
   function display() {
      var inp1 = document.getElementById("inp1");
      var val1 = inp1.value;
      var inp2 = document.getElementById("inp2");
      var val2 = Number(inp2.value);
      var rem = val1 < val2;
      result.innerHTML += val1 + " < " + val2 + " : " + rem + " </b> <br> ";
   }
   </script>
</body>
</html>

在這個例子中，我們可以清楚地看到，當用戶輸入一個字串數字時，小於運算子的行為與數字的情況相同，但是如果使用者輸入一個長字串名稱，則它返回 false。

讓我們再看一個例子，其中一個字串將使用小於運算子與另一個字串進行比較。

演算法

前一個示例和這個示例的演算法相似。您只需要進行一些小的更改，例如將兩個輸入元素的型別都更改為文字，並刪除兩個輸入值的Number()方法。

示例 3

下面的示例將解釋如果兩個輸入都為字串，小於運算子的行為：

<!DOCTYPE html>
<html>
<body>
   <h2> Less than Operator (<) in JavaScript </h2>
   <input type = "text" id = "inp1"> <br> <br>
   <input type = "text" id = "inp2">
   <p> Click to see the result of less than Operator (<) of above two inputs. </p>
   <p id = "result"></p>
   <button onclick = "display()"> Show Result </button>
   <script>
   var result = document.getElementById("result");
   function display() {
      var inp1 = document.getElementById("inp1");
      var val1 = inp1.value;
      var inp2 = document.getElementById("inp2");
      var val2 = inp2.value;
      var rem = val1 < val2;
      result.innerHTML += " Result of less than operator, when a string <b> " + val1 + " </b> is compared with another string <b> " + val2 + " </b> is: <b> " + rem + " </b> <br> ";
   }
   </script>
</body>
</html>

在上面的示例中，如果輸入是字串數字，則小於運算子的行為與數字的情況相同。但是，如果兩個輸入都是字串，則其行為出乎意料，因為它使用它們包含的Unicode 程式碼值來比較字串。

在本教程中，我們學習了 JavaScript 中的小於運算子，並透過針對每種情況的不同程式碼示例來了解小於運算子在不同場景下的行為，以便更好地理解它們。

更新於：2022年11月8日

398 次檢視

開啟您的職業生涯

完成課程獲得認證

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