---
# System prepended metadata

title: 20230708 強制轉型/運算子/判斷式
tags: [前端課程筆記]

---

### 隱含的強制轉型
#### 算術運算子

```
- 兩個數字相加是數學加法。
- 任何一個操作數是字串，結果就是字串連接。
- 其他類型會根據情況進行轉型。
```
> [time=Fri, May 24, 2024 3:42 PM]
1. number + string
強制轉為string
![](https://hackmd.io/_uploads/B1gIKcvKh.png)
2. number -*/%** string
強制轉為number，轉不了則結果為NaN
![](https://hackmd.io/_uploads/SJvAYcDt2.png)
![](https://hackmd.io/_uploads/SkzZccvKn.png)
3. number +-*/%** boolean
強制轉為number(true會是1，false會是0)
![](https://hackmd.io/_uploads/S1cCpAAY2.png)
4. string+boolean 
強制轉為string
![](https://hackmd.io/_uploads/HkmWC5Pt3.png)
5. string -*/%** boolean
強制轉為number，true轉為1、false轉為0
![](https://hackmd.io/_uploads/S1V2C5vKh.png)
![](https://hackmd.io/_uploads/HJ1AC9PY2.png)
### 補充：undefined/null/NaN
#### undefined
代表「沒有定義」或「沒有值」
![](https://hackmd.io/_uploads/H1e0JiDFn.png)
#### null
代表「空值」
![](https://hackmd.io/_uploads/ryObxiDFn.png)
![](https://hackmd.io/_uploads/rkS7gswt3.png)
#### NaN
無法表示的數值(number)
不等於任何值，也不等於自己
![](https://hackmd.io/_uploads/HJXmbsDt3.png)
### 比較運算子
1. number {OP} string 
string強制轉為number
空字串會轉為0
非數字會轉為NaN
![](https://hackmd.io/_uploads/SJ-zzovtn.png)
![](https://hackmd.io/_uploads/rJVPQiwt2.png)
![](https://hackmd.io/_uploads/rkaV7sDY2.png)
建議當不同型別的變數需要進行比較時，自己去使用明確的強制轉換，不要讓系統自動使用隱含轉換。以下範例程式:
```
let age = prompt('安安請問你幾歲呀');
let legal = 18;
let illegal = age < legal;
if(illegal){
    alert('你是未成年小寶貝，不能買煙喔');
}else{
    alert('可以買煙呀你')
}
```
在prompt輸入數字，可以被判斷式判斷並輸出alert。
但會有一個bug是：在prompt輸入無法被轉為數字的字串，例如'Hey'，於是這種會被轉為NaN，於是不會跑進if(illegal)的判斷式，於是就會跑出可以買煙。
->因此這個地方必須使用明確強制轉換，將age轉為number，並寫出一個“無法被轉為數字”時的條件
```
let age = Number(prompt('安安請問你幾歲呀'));
if(isNaN(age)){
    alert('請輸入正確的年齡啦')
}
else if(age < 18){
    alert('你是未成年小寶貝，不能買煙喔');
}else{
    alert('可以買煙呀你')
}
```
2. boolean {OP} number
boolean強制轉為number
非數字會轉為NaN
![](https://hackmd.io/_uploads/rJqh8oPF3.png)
3. boolean {OP} string
強制轉為number
空字串會轉為0
非數字會轉為NaN
![](https://hackmd.io/_uploads/S1NuvsDt3.png)
4. string {OP} string
string強制轉為ascii code
會從最左邊第一個字母開始比，順序參照下表
![](https://hackmd.io/_uploads/rkICPswtn.png)
![](https://hackmd.io/_uploads/SyEKdswKh.png)

### 邏輯運算子
1. &&
代表 and：全部皆為 true，才是 true

| x | y | x&&y |
| -------- | -------- | -------- |
|true|true|true|
|true|false|false|
|false|true|false|
|false|false|false|

```javascript!
JavaScript 規則：由左到右，回傳第一個是 false 的值
若都是 true，回傳最右邊第一個值
```
![](https://hackmd.io/_uploads/H1rQAiPK3.png)
![](https://hackmd.io/_uploads/SJtACovKh.png)
![](https://hackmd.io/_uploads/r1IKb2DKn.png)
```javascript!
1 && false  && 0 // 回傳 false
'' && 1 // 回傳 ''
1 && 2 && 3 // 回傳 3，都是 true 回傳最右邊第一個值
```

2. ||
代表 or：其中一個是 true 就是 true

| x | y | xIIy |
| -------- | -------- | -------- |
|true|true|true|
|true|false|true|
|false|true|true|
|false|false|false|

```javascript!
JavaScript規則：由左到右，回傳第一個是 true 的值
若都是 true，回傳最右邊一個值
```
![](https://hackmd.io/_uploads/r1Y55nPY3.png)
![](https://hackmd.io/_uploads/HysQjnPt2.png)
![](https://hackmd.io/_uploads/HyNb6nwt2.png)
非空字符串都会被解释为真值
3. !
代表：not、相反
| x | !x |
| -------- | -------- 
|true|false|
|false|true|

![](https://hackmd.io/_uploads/Hyj00nPYh.png)

### 判斷式
if...else...條件判斷
1. if(條件)->當符合此條件(為true) `一組只有一個`
2. else...if->當if條件不符合，卻符合此條件(為true)時 `一組可以有多個`
3. else->當所有if和else if 條件都不符合時 `一組只有一個`

只有if
```
if(A條件){
 //做某件事
}
```
只有if、else
```
if(A條件){
 //做某件事
}else{
 //做某件事
}
```
有if、else if、else
```
if(A條件){
 //做某件事
}else if(B條件){
 //做某件事
}else{
 //做某件事
}
```
有if、多個else if、else
```
if(A條件){
 //做某件事
}else if(B條件){
 //做某件事
}else if(C條件){
 //做某件事
}else if(D條件){
 //做某件事
}else{
 //做某件事
}
```

範例1：購物網站跳出警訊
```
//消費者送出點單，判斷是否有買酒
let buyBeer = true;
if(buyBeer){
    window.alert('提醒你，喝酒後不要開車喔');
}
// 送出商品
```
範例2：是否成年判斷
```
let age = prompt('安安請問你幾歲呀');
let legal = 18;
let illegal = age < legal;
if(illegal){
    alert('你是未成年小寶貝，不能買煙喔');
}else{
    alert('可以買煙呀你')
}
```
範例3：投票類別判斷
```
let age = Number(prompt('安安請問你幾歲呀'));
if(isNaN(age)){
    window.alert('請輸入正確的年齡數字喔')
}else if(age < 18){
    window.alert('你還未滿合法年紀，不能投票喔')
}else if(age >= 18 && age < 20){
    window.alert('你滿18還未滿20，可以投總統，但不能投公投喔')
}else{
    window.alert('你可以投總統和公投喔')
}
```
### switch條件判斷
1. switch(變數/條件) -> 要判斷的變數或條件
2. case 條件：->符合的值，相當於if(a===b)
3. break -> 每個case執行區塊的結束 沒使用將會繼續執行下一個case
4. default： -> 當所有case都不符合時，會執行此區塊

基本款
```
switch(變數){
    case 條件1:
        //符合條件1的執行區塊
        break;
    case 條件2:
        //符合條件2的執行區塊
    default:
        //預設執行區塊
        break;
}
```

變形1:switch裡面不放變數而是直接放條件式
```
switch(條件式){
    case true:
        //符合條件的執行區塊
        break;
    default:
        //不符合條件的執行區塊
        break;
}
```
變形2:多個case不使用break，符合時執行同個區塊
```
switch(變數){
    case 條件1:
    case 條件2:
    case 條件3:
        //符合條件1.2.3的執行區塊
        break;
    case 條件4:
    case 條件5:
        //符合條件4.5的執行區塊
        break;
    default:
        //預設執行區塊;
        break;
}
```

範例1(基本款): 依不同性別顯示不同提醒
```
let gender = window.prompt('What is your gender? (F or M)');
switch(gender){
    case 'F':
    window.alert('You are a female.');
    break;
    case 'M':
    window.alert('You are a male');
    break;
    default:
    window.alert('Wrong Gender');
    break;
}
```
執行第一行時將透過使用者取得gender (ex: gender=’F’)
執行到case ‘F’ 時因為判斷gender === ‘F’ 為true，故執行下方區塊
彈出"You are a female."提醒後，遇到break會跳出整個switch區塊
(沒有break的話會繼續執行並彈出"You are a male"提醒)


範例2(變形1): 判斷是否成年
```
let age = Number(window.prompt('您幾歲呢？請輸入數字'))
switch(age >=18){
    case true:
    window.alert('您已成年');
    break;
    case false:
    window.alert('您未成年');
    break;
}
```
當使用者輸入年齡後轉換為數字存放在age中(ex: age = 20)
第一行switch中，先判斷age >= 18 ，得到true
執行到case true 時因為判斷 true === true為true，固執行下方區塊
彈出"您已成年"提醒後，遇到break會跳出整個switch區塊

範例3(變形2): 計算不同月份的天數

```
let month = Number(window.prompt('請輸入月份'));
if(isNaN(month)){
    window.alert(`重新輸入，請輸入1-12的數字`);
}else{
    switch(month){
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        window.alert(`${month}月有31天`);
        break;
    case 2:
        window.alert(`${month}月有28或29天`);
        break;
    default:
        window.alert(`${month}月有30天`);
        break;
}
}
```


當使用者輸入月份後轉換為數字存放在month中(ex: month = 7)
執行到case 7時因為判斷 month === 7為true，固執行下方區塊
彈出"31天"提醒後，遇到break會跳出整個switch區塊
(反之，若使用者輸入month=6，因上方case都不符合，故會執行default區塊，彈出"30天"提醒)


---

作業
1.
彈跳視窗詢問使用者出生年份
計算出使用者今年幾歲
彈跳視窗詢問使用者性別
條件判斷如下
若為女性，且18歲以上，則彈跳訊息視窗並顯示18歲
若為男性，或18歲以下的女性，則彈跳訊息視窗並顯示其真實歲數
若輸入資料無法判定性別，則彈跳訊息視窗並顯示錯誤訊息
```
let year = Number(window.prompt('請輸入您的出生年份'));
let age = 2023 - year;
if(isNaN(year) || year > 2023){
    window.alert('請輸入正確年份');
}else{
    let gender = window.prompt('請輸入您的性別(男性請輸入M，女性請輸入F)');
    if(gender === 'F' && age >= 18){
        window.alert('你現在是十八歲');
    }else if(gender === 'M' || age < 18){
        window.alert(`你現在是${age}歲`);
    }else{
        window.alert('請輸入正確性別');
    }
}
```
2.
彈跳視窗詢問年分
彈跳視窗詢問月份
告訴使用者該月共幾天
!!!需處理閏年，規則如下
任何能被4整除的年份都是閏年
→ 例如 1988 年、1992 年及 1996 年都是閏年
但是能以 100 (例如1900 年) 整除的年份，同時也必須要能以 400 整除，才算是閏年
→ 因此，下列年份不是閏年：1700、1800、1900、2100、2200…
→ 下列年份為閏年：1600、2000、2400
```
let year = Number(window.prompt(`請輸入年份`));
if(isNaN(year)){
    window.alert(`請輸入正確年份`);
}else{
    let month = Number(window.prompt(`請輸入月份`));
    switch(month){
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            window.alert(`${year}年的${month}月是31天`);
            break;
        case 2:
            if(year%4===0){
                if(year%100===0 && year%400===0){
                    window.alert(`${year}年的${month}月是29天`);
                }else{
                    window.alert(`${year}年的${month}月是29天`);
                }
            }else{
                window.alert(`${year}年的${month}月是28天`);
            }
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            window.alert(`${year}年的${month}月是30天`);
            break;
        default:
            window.alert(`請輸入正確月份`);
            break;
    }
}
```