> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/grammar/op/relational/compare.md).

# comparison operator

[JS](/web/js.md) ⟩ [statement](/web/js/grammar/statement.md) ⟩ [expression](/web/js/grammar/statement/expr.md) ⟩ [operator](/web/js/grammar/op.md) ⟩ [relational](/web/js/grammar/op/relational.md) ⟩ comparison

{% tabs %}
{% tab title="🗺️ 圖表" %} <img src="/files/FGYqbH6CbWF4JpiyWEpF" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %} <mark style="color:yellow;">**trichotomy law**</mark>： <mark style="color:blue;">`a < b, a = b, a > b`</mark> <mark style="color:red;">**doesn't**</mark>**&#x20;**<mark style="color:yellow;">**apply**</mark> to [<mark style="color:blue;">**NaN**</mark>](/web/js/val/prim/num/special/nan.md)❗

```javascript
3 <  NaN,      // false❗
3 == NaN,      // false❗
3 >  NaN,      // false❗
```

{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:purple;">**comparison operators**</mark>

* <mark style="color:yellow;">**operands**</mark> may be <mark style="color:yellow;">**of**</mark>**&#x20;**<mark style="color:red;">**any**</mark> [<mark style="color:yellow;">**type**</mark>](/web/js/val/type.md).
* <mark style="color:yellow;">**operands**</mark> that are <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**numbers**</mark>**/**<mark style="color:yellow;">**strings**</mark> are [<mark style="color:blue;">**converted**</mark>](/web/js/val/type/convert.md) to <mark style="color:yellow;">**numbers**</mark>**/**<mark style="color:yellow;">**strings**</mark>.
* <mark style="color:red;">**if**</mark> <mark style="color:yellow;">**either operand**</mark> is (or converts to) [NaN](/web/js/val/prim/num/special/nan.md), the <mark style="color:purple;">**result**</mark>**&#x20;**<mark style="color:yellow;">**is**</mark> <mark style="color:red;">**false**</mark>. :star:
  {% endhint %}

{% hint style="info" %} <mark style="color:purple;">**comparison operators**</mark> <mark style="color:red;">**do**</mark>**&#x20;**<mark style="color:yellow;">**allow**</mark> to <mark style="color:yellow;">**mix**</mark> [BigInt](/web/js/val/prim/bigint.md) and [Number](/web/js/val/prim/num.md):exclamation:
{% endhint %}

{% hint style="warning" %} <mark style="color:purple;">**`<=`**</mark> and <mark style="color:purple;">**`>=`**</mark> <mark style="color:red;">**do not**</mark>**&#x20;**<mark style="color:yellow;">**rely on**</mark> <mark style="color:blue;">**`==`**</mark> or <mark style="color:blue;">**`===`**</mark>:exclamation:

* <mark style="color:purple;">**`<=`**</mark> is defined to be "<mark style="color:red;">**not**</mark> <mark style="color:purple;">**`>`**</mark>".
* <mark style="color:purple;">**`>=`**</mark> is defined to be "<mark style="color:red;">**not**</mark> <mark style="color:purple;">**`<`**</mark>".

<mark style="color:yellow;">**with one**</mark>**&#x20;**<mark style="color:red;">**exception**</mark>, if either <mark style="color:yellow;">**operand**</mark> is <mark style="color:blue;">**NaN**</mark>, the result is <mark style="color:yellow;">**always**</mark>**&#x20;**<mark style="color:red;">**false**</mark>:exclamation:
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* :information\_source: [type conversion](/web/js/val/type/convert.md) is <mark style="color:yellow;">**involved**</mark> in <mark style="color:purple;">**comparison**</mark>.
* :information\_source: [object -> primitive conversion](/web/js/val/obj/convert/obj-to-prim.md) is <mark style="color:yellow;">**involved**</mark> in <mark style="color:purple;">**comparison**</mark>.
* :information\_source: <mark style="color:purple;">**comparison**</mark> <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**numbers**</mark>](/web/js/val/prim/num.md), [add/concate (+)](/web/js/grammar/op/arithmetic/binary/+.md) <mark style="color:yellow;">**favors**</mark> [<mark style="color:blue;">**strings**</mark>](/web/js/val/prim/str.md).
  {% endtab %}

{% tab title="💈範例" %}
replit： [comparison](https://replit.com/@pegasusroe/comparison#index.js)

```javascript
 11  <  3,     // false    (numeric comparison)
'11' < '3',    // true     (string comparison)

// ⭐ "prefer-number" conversion
'11' <  3,     // false    ('11'  -> 11)

// ⭐ `NaN` always leads to `false`
'one' <  3,    // false    ('one' -> NaN)
'one' == 3,    // false    ('one' -> NaN)
'one' >  3,    // false    ('one' -> NaN)

// ⭐ trichotomy law： `a < b, a = b, a > b` doesn't apply to NaN❗
3 <  NaN,      // false
3 == NaN,      // false
3 >  NaN,      // false
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 4.9.2 Comparison Operators
  {% endtab %}

{% tab title="📘 手冊" %}

* [Less than (<)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than)
* [Greater than (>)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than)
* [Less than or equal (<=)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal)
* [Greater than or equal (>=)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal)
* [String.prototype.localeCompare()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)  ⭐️ simply calls Intl.Collator
* [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)  ⭐️ language-sensitive string comparison.
  {% endtab %}
  {% endtabs %}