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 中有一些假值（falsy values），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> 设置不同的变量值然后尝试...</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> 设置不同的变量值然后尝试...</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> 设置不同的变量值然后尝试...</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> 设置不同的变量值然后尝试...</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> 设置不同的变量值然后尝试...</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> 设置不同的变量值然后尝试...</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> 设置不同的变量值然后尝试...</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> 设置不同的变量值然后尝试...</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