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.