JavaScript 中的小于运算符 (<) 是什么?
小于运算符是属于二元运算符类别的运算符之一，这意味着它需要对两个操作数进行操作。如果运算符左侧的操作数小于右侧的操作数，则返回 true。否则，它将返回 false。小于运算符属于比较运算符类别，用于将两个值相互比较。在本教程中，我们将借助代码示例讨论 JavaScript 中的小于运算符以及它在不同情况下的工作方式。
语法
以下语法将展示如何使用小于运算符来检查两个操作数中哪个操作数较小 −
val1 < val2 // 如果 val1 较小，则返回 true，否则返回 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。
让我们再看一个将数字与字符串进行比较的例子。
算法
此示例的算法与上一个算法几乎相似。您只需将任何一个输入元素的类型更改为 text ，并删除该特定输入值上的 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 中的小于运算符，并借助针对每种情况的不同代码示例了解了小于运算符在不同场景中的行为，以便更好地理解它们。
