比較運算子：`==`、`!==`

這篇要介紹 JavaScript 的比較運算子：==、!==

🎃 == 用來「檢查兩者是否相等」

🎃 !==用來「檢查兩者是否不相等」

「==」等於

🎃 「=」和「==」的差別是：

🍋 「=」代表：我要賦予一個“值”給它

例如：

var myAge = 18;

🍋 「==」代表：兩個東西要去“做比較”時，會使用「==」

例如：

• 兩個字串的「值」相同，因此回傳給我true
  

• 兩個字串的「值」不同，因此回傳給我false
  

• 「布林值」也可以拿來做比較
  

「!==」不等於

🎃 !代表「相反」

範例練習

現在，要做一個「==」和「!==」的範例練習

我的 codepen 範例

https://codepen.io/saffranwang/full/jOEMpjY

html 架構

html:

<div class="wrap">
    <div class="wrap-inner">
        <h1>六角西餐廳 - 壽星折扣篇</h1>
        <p>服務生：Hello，請問您是本月壽星嗎？</p>
        <p>  顧客：<em class="tag" id="birthdayId"></em></p>
        <p>服務生：請問人還沒到齊對嗎？看預約名單您是預定兩個位置</p>
        <p>  顧客：<em class="tag" id="peopleId"></em></p>
    </div>
</div>

JS 程式碼

是本月壽星嗎？（使用「==」來做比較）

JS:

🎃 先宣告一個變數myMonth–> 我的生日月份

🎃 宣告另一個變數thisMonth–> 現在的月份

🎃 再宣告一個變數birthdayCheck–> 把「myMonth和thisMonth」拿來做比較

‼️ 使用「==」來做比較

🎃 先用console.log()看一下結果

var myMonth = 5;
var thisMonth = 12;

var birthdayCheck = myMonth == thisMonth;

console.log(birthdayCheck);

Console 回傳「false」

🎃 接著，就可以把「false」這個結果，帶到顧客的回答中（id="birthdayId"）

JS:

var myMonth = 5;
var thisMonth = 12;

var birthdayCheck = myMonth == thisMonth;

document.getElementById('birthdayId').textContent = birthdayCheck;

人“還沒”到齊對嗎？（使用「!==」來做比較）

JS:

🎃 先宣告一個變數nowPeople–> 現在的人數

🎃 宣告另一個變數totalPeople–> 預定的總人數

🎃 再宣告一個變數peopleCheck–> 把「nowPeople和totalPeople」拿來做比較

‼️ 因為服務生是問「請問人“還沒”到齊對嗎？」，所以使用「!==」來做比較

🎃 先用console.log()看一下結果

var nowPeople = 1;
var totalPeople = 2;

var peopleCheck = nowPeople !== totalPeople;

console.log(peopleCheck);

Console 回傳「true」

🎃 接著，就可以把「true」這個結果，帶到顧客的回答中（id="peopleId"）

JS:

var nowPeople = 1;
var totalPeople = 2;

var peopleCheck = nowPeople !== totalPeople;

document.getElementById('peopleId').textContent = peopleCheck;