---
# System prepended metadata

title: 20230701 算數運算子/比較運算子/強制轉型
tags: [前端課程筆記]

---

# 算數運算子/比較運算子/強制轉型
[TOC]

### 算術運算子

| 運算子 | 說明 | 範例 |
| -------- | -------- | -------- |
| +     | 加法     | let a = 4+3;     |
| -     | 減法     | let a = 4-3;     |
| *     | 乘法     | let a = 4*3;     |
| /     | 除法     | let a = 4/3;     |
| %     | 取餘數     | let a = 5%3;     |
| ++     | 增加1     | let a = 5; a++; 相當於 a=a+1;     |
| --     | 減少1     | let a = 5; a----; 相當於 a=a-1;|
| **     | 指數 優先權最高 right-associative (右到左)     | let a = 2 ** 3; let b = 2 ** 3 ** 2 // 2*9 = 512; let c = (2**3) ** 3 // 8 ** 2 = 64|

優先權
1. **優先權最高
2. 先乘除後加減
3. 由左到右
4. 可使用括號來提高優先權

賦值運算子


| 運算子 | 說明 | 範例 |
| -------- | -------- | -------- |
| =     | 賦值     | let a = 3;     |
| +=     | 加法賦值     | let a = 3; a +=5; // 相當於 a = a+5;     |
| -=     | 減法賦值     | let a = 7; a-=5; 相當於 a = a-5; |
| *=     | 乘法賦值     | let a = 2; a*=5; // 相當於 a = a*5; |
| /=     | 除法賦值     | let a = 15; a/=5; // 相當於 a=a/5; |
| %=     | 餘數賦值     | let a = 15; a%=4; // 相當於 a=a%4;     |
| **=     | 指數賦值     | let a = 2; a**=3; // 相當於 a=a**3;    |

### 比較運算子

| 運算子 | 說明 | 範例 |
| -------- | -------- | -------- |
| ==     | 等於     | a == 3; 3=='3';     |
| ===     | 等於(嚴格)     | 3 === 3; (3 ==='3'不符合);     |
| !=     | 不等於==的相反     | 3!=4; 'a'!='b'; true! == false;|
| !==     | 不等於(嚴格)===的相反     | 3!=4; 'a'!='b'; true !== false; 3!=='3';     |
| >     | 大於     | 5>4; |
| <     | 小於     | 3<4; |
| >=     | 大於等於     | 5>=4; 4>=4; |
| <=     | 小於等於     | 3<=4;4<=4;|

### 強制轉型
1. 明確的強制轉型
轉成string 
String(要轉換的變數)
範例1:將number轉換為string
![](https://hackmd.io/_uploads/H102gbQKh.png)

範例2:將boolean轉換為string
![](https://hackmd.io/_uploads/BJd_bbQY3.png)

2. 轉成number
Number(要轉換的變數)
boolean轉number:true會被轉為1;false會被轉為0
string轉number:不可被轉為數字的會變為NaN
範例1:將string轉換為number
![](https://hackmd.io/_uploads/rJuENbXtn.png)
範例2:將boolean轉換為number
![](https://hackmd.io/_uploads/rkWeSZQK2.png)
範例3:將boolean轉換為number
![](https://hackmd.io/_uploads/SyltrZmF2.png)

3. 轉成boolean
Boolean(要轉換的變數)
number轉boolean:數字0會被轉換為false，其餘皆為true
string轉boolean:空字串會被轉換為false，其餘皆為true
範例1:將number(1)轉換為boolean
![](https://hackmd.io/_uploads/rJkFLbmt3.png)

範例2:將number(0)轉換為boolean
![](https://hackmd.io/_uploads/rkJfPW7t2.png)
範例3:將number(>1)轉換為boolean
![](https://hackmd.io/_uploads/B14iD-QFh.png)
範例4:將number(<0)轉換為boolean
![](https://hackmd.io/_uploads/HJ6M_-mK2.png)
範例5:將string轉換為boolean
![](https://hackmd.io/_uploads/Syr2_Z7Kn.png)
範例6:將string(false)轉換為boolean
![](https://hackmd.io/_uploads/rk9QFZXFn.png)
範例7:將string(空)轉換為boolean
![](https://hackmd.io/_uploads/Skz3t-mK2.png)

實際運用
<補充: popup boxes>
window.alert、alert 提醒視窗
用法:alert(string)
範例:
![](https://hackmd.io/_uploads/HkZacZ7Y2.png)

window.confirm、confirm確認視窗
用法:confirm(string):boolean
範例:
![](https://hackmd.io/_uploads/Hyp7jZmt2.png)

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

window.prompt、prompt 回答視窗
用法:prompt(string, string):string
第二個參數為optional，回答視窗預設的文字
範例:
![](https://hackmd.io/_uploads/SyWd3WXFn.png)
![](https://hackmd.io/_uploads/Hk9_hW7Kn.png)
將取出的年份轉為數字
![](https://hackmd.io/_uploads/ryxPTZ7t2.png)
![](https://hackmd.io/_uploads/Hy5D6Z7Y2.png)


---

課後練習
1. 運算子練習
`a = 4 + 3 ** 2 + 6 * 2 ** 3 `
a = 61

2. 型別轉換與popup練習
彈跳視窗詢問使用者出生年份
計算出使用者今年幾歲
彈跳訊息視窗，顯示他今年的歲數

```
let year = prompt("你是幾年出生的啦");
let yearNumber = Number(year);
let age = 2023-yearNumber;
alert(`你今年是 ${age}歲喔。`);
```

```
let year = prompt("你是幾年出生的啦");
let yearNumber = Number(year);
let age = 2023 - yearNumber;

if (age <= 0) {
  alert("你是從靈異星球來的？請重新輸入");
  year = prompt("你是幾年出生的啦");
  yearNumber = Number(year);
  age = 2023 - yearNumber;
}

alert(`你今年是 ${age} 歲喔。`);
```