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
列印頁面
上一頁
下一頁
廣告