JavaScript - 比较运算符



JavaScript 比较运算符

JavaScript 中的比较运算符用于比较两个变量或值,并根据比较结果返回布尔值 true 或 false。例如,我们可以使用比较运算符来检查两个操作数是否相等。

比较运算符用于逻辑表达式中。逻辑表达式计算结果为 true 或 false。

比较运算符是二元运算符,因为它们对两个操作数执行运算。操作数可以是数值、字符串、逻辑值或对象值。

JavaScript 中有八个比较运算符来执行不同类型的比较。这里,我们给出了一个表格,解释了每个比较运算符及其示例。

运算符 描述 示例
== 等于 x == y
!= 不等于 x != y
=== 严格相等(值相等且类型相等) x === y
!== 严格不相等(值不相等或类型不相等) x !== y
> 大于 x > y
< 小于 x < y
>= 大于或等于 x >= y
<= 小于或等于 x <= y

如何进行比较?

如果两个操作数类型相同,则比较运算符比较值。但是,如果操作数类型不同,JavaScript 会执行适当的类型转换进行比较。这称为类型强制。

如果两个操作数都是数字,则通过检查操作数的数值来进行比较。字符串根据词法顺序(使用 Unicode 值)进行比较。当字符串与数字比较时,会执行以下类型强制:

  • 如果字符串只包含数字值,则将其转换为数字类型。

  • 如果字符串也包含非数字值,则将其转换为 NaN。

  • 如果字符串为空,则将其转换为零。

严格相等 (===) 和严格不相等 (!==) 运算符执行严格比较。这些运算符在执行比较运算之前不执行类型转换。

处理假值

JavaScript 中有一些假值。JavaScript 在执行比较时会以不同的方式处理这些假值。以下是假值:

  • 0(零)
  • false
  • ' ' 或 " "(空字符串)
  • null
  • undefined
  • NaN

所有比较运算符(除了 === 和 !==)在执行比较之前都会将 false 和空字符串转换为零。

除此之外,小于和大于运算符 (<, <=, >, >=) 会将 null 转换为零,将 undefined 转换为 NaN。

JavaScript 等于 (==) 运算符

“等于”运算符检查两个操作数的值是否相等。如果操作数相等,则返回 true;否则,返回 false。如果操作数类型不同,则会执行类型转换,然后比较操作数。

让我们来看一些没有类型转换的比较示例。两个操作数类型相同。

const a = 10;
const b = 20;
a == 10; //true
a == b; // false 
"Hello" == "Hello"; // true

现在让我们检查一些带有类型转换的比较示例。这里的操作数类型不同。

5 == '5'; // true
0 == false; // true
0 == ''; // true

在上面的第一个示例中,'5' 被转换为 5(字符串到数字的转换)。false 和空字符串 (' ') 在比较之前被转换为零 (0)。

示例

以下代码演示了如何在 JavaScript 中使用等于运算符:

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a == b);
  document.getElementById("output").innerHTML = "(a == b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript 不等于 (!=) 运算符

“不等于”运算符检查两个操作数的值是否不相等。如果操作数不相等,则返回 true;否则,返回 false。与等于运算符相同,如果操作数类型不同,则会执行类型转换。

在下面的示例中,比较了相同类型的两个值以进行不相等检查。如果值不相等,则不等式运算符将返回 true。

10 != 10; // false
10 != 20; // true
"Hello" != "Hello"; // false

让我们检查操作数类型不同时的不相等情况

.
10 != '10'; // false
0 != false; // false

在第一个示例中,'10' 被类型转换为 10。这里字符串被转换为数字类型。在第二个示例中,false(布尔值)被转换为零(数字)。

示例

以下代码演示了如何在 JavaScript 中使用不等式运算符。

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a != b);
  document.getElementById("output").innerHTML = "(a != b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript 严格相等 (===) 运算符

“严格相等”运算符检查两个操作数的值和数据类型是否相等。如果两个操作数相等且类型相同,则返回 true。

换句话说,它在不进行类型转换的情况下检查操作数的相等性。如果操作数类型不同,则直接返回 false,不再进一步检查值。

10 === 10; // true
10 === 20; // false
'Hello'==='Hello'; // true
10 === '10'; // false
0 === false; // false

示例

以下代码演示了如何在 JavaScript 中使用严格相等运算符。

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a === b);
  document.getElementById("output").innerHTML = "(a === b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

严格不相等 (!==) 运算符

“严格不相等”运算符检查两个操作数的值或类型是否不相等。如果操作数类型相同但值不相等,或者操作数类型不同,则返回 true。

与严格相等运算符相同,它也首先在不进行类型转换的情况下检查操作数的不相等性。如果操作数类型不同,则直接返回 true,不再进一步检查值。

10 !== 10; //returns false
10 !== 20; // returns true
'Hello'!=='Hello'; // returns false
10 !== '10'; //return true
0 !== false; //returns true

示例

以下代码演示了如何在 JavaScript 中使用严格不相等运算符。

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a !== b);
  document.getElementById("output").innerHTML = "(a !== b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript 大于 (>) 运算符

“大于”运算符检查左操作数的值是否大于右操作数的值。如果是,则返回 true;否则返回 false。

20 > 10; // true
10 > 10; // false
"ab" > "aa"; // true
10 > '5'; // true

示例

以下代码演示了如何在 JavaScript 中使用大于运算符。

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a > b);
  document.getElementById("output").innerHTML = "(a > b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

大于或等于 (>=) 运算符

“大于或等于”运算符检查左操作数的值是否大于或等于右操作数的值。如果是,则返回 true;否则返回 false。

10 >= 5; // true
5 >= 5; // true
"ab" >= "aa"; // true
10 >= '5'; // true

示例

以下代码演示了如何在 JavaScript 中使用大于或等于运算符。

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a >= b);
  document.getElementById("output").innerHTML = "(a >= b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript 小于 (<) 运算符

“小于运算符”如果左操作数的值小于右操作数的值,则返回 true;否则返回 false。

10 < 20; // true
5 < 5; // false
"ab" < "aa"; // true
10 < '5'; // false

示例

以下代码演示了如何在 JavaScript 中使用小于运算符。

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a < b);
  document.getElementById("output").innerHTML = "(a < b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript 小于或等于 (<=) 运算符

小于或等于运算符检查左操作数的值是否小于或等于右操作数的值。如果是,则条件为真。

10 <= 20; // true
5 <= 5; // true
"ab" <= "aa"; // false
10 <= '5'; // false

示例

以下代码演示了如何在 JavaScript 中使用小于或等于运算符。

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a <= b);
  document.getElementById("output").innerHTML = "(a <= b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

比较 null、undefined 和 NaN

在 JavaScript 中,null、undefined 和 NaN 是假值,在比较时不会转换为零 (0)。

0 == null; // returns false
0 == undefined; // returns false
0 == NaN; // returns false

null 和 undefined 是弱相等。

null == undefined; // returns true
null === undefined; // returns false

NaN 的类型是数字,但它不等于零。有趣的是,NaN 不等于它自身。

NaN == NaN; // returns false
广告