Javascript 简明教程

JavaScript - Comparison Operators

JavaScript Comparison Operators

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

比较运算符用于逻辑表达式。逻辑表达式被求值为 true 或 false。

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

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

Operator

Description

Example

==

Equal

x == y

!=

Not Equal

x != y

===

严格相等（相等的值和相等的类型）

x === y

!==

严格不相等（不等于值或不等于类型）

x !== y

>

Greater than

x > y

<

Less than

x < y<

>=

大于或等于

x >= y

⇐

小于或等于

x ⇐ y

How comparison is done?

如果两个操作数的类型相同，比较运算符会比较它们的值。然而，如果操作数的类型不同，JavaScript 会对比较执行适当的类型转换。这被称为类型强制转换。

如果两个操作数都是数字，将通过检查操作数的数值来进行比较。字符串的比较基于按字母顺序排列，使用 Unicode 值。当字符串与数字比较时，会执行以下类型强制转换。

  1. 如果字符串仅包含数值，它将转换为数字类型。

  2. 如果字符串还包含非数值，它将转换为 NaN。

  3. 如果字符串为空，它将转换为零。

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

Dealing with falsy values

JavaScript 中有一些错误的值。在执行比较时，JavaScript 以不同方式处理这些错误的值。以下是不正确的价值观：

  1. 0 (zero)

  2. false

  3. “或"（空字符串）

  4. null

  5. undefined

  6. NaN

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

除此之外，小于和大于运算符（<、⇐、>、>=）将 null 转换为零，将 undefined 转换为 NaN。

JavaScript Equality (==) Operator

“相等”运算符检查两个操作数的值是否相等。如果操作数相等，则返回 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（字符串到数字转换）。错误和空字符串（' '），在比较之前被转换为零 (0)。

Example

以下代码展示如何在 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 Inequality (!=) Operator

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

在下面的示例中，比较两个相同类型的变量是否不等。如果值不等，则不等运算符将返回 true。

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

让我们检查当操作数类型不同时的不等性

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

在第一个示例中，将“10”类型转换为 10。此处字符串转换为数字类型。在第二个示例中，将 false（布尔值）转换为零（数字）。

Example

以下代码展示如何在 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 Strict Equality (===) Operator

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

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

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

Example

以下代码展示如何在 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>

Strict Inequality (!==) Operator

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

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

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

Example

以下代码展示如何在 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 Greater Than (>) Operator

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

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

Example

以下代码展示如何在 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>

Greater Than or Equal (>=) Operator

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

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

Example

以下代码展示如何在 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 Less Than (<) Operator

“小于运算符”在左操作数的值小于右操作数的值时返回 true，否则返回 false。

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

Example

以下代码展示如何在 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 Less Than or Equal (⇐) Operator

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

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

Example

以下代码展示如何在 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>

Comparing null, undefined and 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 == NaN; // returns false