---
title: 變數 與 資料型別
tags: 六角學院, JS 必修篇
date: 2021/7/26
---

###### tags: `六角學院` `JS 必修篇`

###### *date: 2021/7/26*

# 📜 變數 與 資料型別

[TOC]

## 7/26 (ㄧ) 變數宣告

//步驟指引
//1.請宣告 const 變數名稱為 courseTitle ，並賦予值為字串JavaScript 必修篇 - 前端修練全攻略
const courseTitle = 'JavaScript 必修篇 - 前端修練全攻略'
//2.請宣告 let 變數名稱為 courseProgress ，並賦予值 0
let courseProgress = 0
//3.請宣告 const 變數名稱為 teacher ，並賦予值為字串 廖洧杰
const teacher = '廖洧杰'
//4.請宣告 const 變數名稱為 activity ，並賦予值為字串 六角筆記王：寫作吧！用文字喚醒你的前端魂！
const activity = '六角筆記王：寫作吧！用文字喚醒你的前端魂！'
//5.請宣告 let 變數名稱為 prize ，並賦予值為字串小米小愛音箱 Art、米家無線吸塵器 mini、小米手環
let prize = '小米小愛音箱 Art、米家無線吸塵器 mini、小米手環'


//最後使用 console.log 印出
console.log(`我參加了${courseTitle}課程，從${courseProgress}開始認真學習，${teacher}老師舉辦了${activity}活動，還有眾多獎項：${prize}等著我!`)

### 變數宣告技術重點

- let 和 const 是**區域**變數
- let 可以重新指定值
- const 是宣告一個常數
- const 物件，內層的屬性依然可以調整，因為物件是傳**參考**
- var 不推薦使用 :-1:

---

## 7/27 (二) 型別判斷

### 題目一

以下變數 a, b, c, d, e, f 它們的值、型別各自為何?

let a = 1 +"2"+ 3 ;  // a = 123, String
let b = "1" * "1";   // b = 1, Number
let c = 2 - "1";     // c = 1, Number
let d = 1 > 2;       // d = false, boolean
let e = 2 > 1;       // e = true, boolean
let f = "我好棒" - 1; // f = NaN, Number

### 型別判斷技術重點

- 因為 JS 是弱型別語言，在執行`+`法運算時，會優先進行字串連接
- 在執行`-`、`*`、`/`、`%`運算時，如果不是強制轉型，則會優先進行數字運算
- 使用比較運算符，會回傳**布林值**

### 題目二

以下選項哪些有問題，請指出有問題的答案，並回答為什麼。

//1 const 不能重複賦予值
const HexSchool = "六角";
HexSchool = "六角學院";

//2 變數名稱不能重複宣告
const HexSchoolMail = "[e-mail]";
const HexSchoolMail = "[e-mail]";

//3 雖然 JS 會自動變數宣告，但不建議養成習慣
let studentNum = 20000;
studentNumber = 30000;

//4 保留字不能變數宣告
let const = const;

//5 變數宣告不能以數字開頭
const 123 = 123;

### 變數宣告命名技術重點

- 保留字不能宣告，例如：`const`、`delete`、`window`...等。
- 變數開頭不能是數字
- 命名小技巧可以使用駝峰命名法，例如`studentNum`、`student_num`、`student-num`...等。

---

## 7/28 (三) 變數實作情境題

### 第一題

媽媽請小明買水果，至少要三樣水果，最多不可超過150元：

//近期水果售價，請勿更動
let applePrice = 50;
let mangoPrice = 30;
let guavaPrice = 30;
let bananaPrice = 20;
let papayaPrice = 40;
let cost;

//請依提示幫小明買水果，並印出水果金額
cost = papayaPrice + mangoPrice * 2 + bananaPrice * 2;
console.log(`小明總共買了${cost}元`); // 140 元

### 第二題

媽媽請小明回程的路上記得去雜貨店買醬油1瓶、鹽1包，雜貨店老闆心血來潮幫小明打了九折，小明有200元：

//醬油、鹽售價，請勿更動
const soySaucePrice = 80;
const saltPrice = 40;
let sale = 0.9;
let mingMoney = 200;

//請幫小明算出還剩下多少錢，並印出結果
mingMoney -= (soySaucePrice + saltPrice) * sale;
console.log(`小明還剩${mingMoney}元`); // 92 元

### 第三題

小明回家後，媽媽為了獎勵小明順利完成跑腿，打算給小明增加下個月零用錢，但在這之前媽媽想先考考小明數學，算對了才願意調漲，以下是媽媽出的題目，請大家一起協助小明：

> 情境題
> 農夫種了12顆高麗菜
> 早上賣掉了2顆高麗菜
> 中午賣掉了3顆高麗菜
> 晚上又種了1顆高麗菜

let cabbageNum = 12;
//請依早、中、晚的順序去記算高麗菜數量，並使用 console.log 印出最終數量
cabbageNum += -2 + -3 + 1;

console.log(`農夫的高麗菜剩下${cabbageNum}顆`) // 8 顆

### 運算技術重點

- 基礎數學，括號先做後，先乘除後加減
- `x = x - 2`可以簡寫成`x -= 2`

---

## 7/29 (四) 字串處理與轉型

### 題目一

請使用 trim() 的方式將以下字串濾掉空白：

let myEmail = "  [e-mail]";
let myPassword = "    987654321";

myEmail = myEmail.trim();
myPassword = myPassword.trim();

console.log(myEmail)    // "[e-mail]"
console.log(myPassword) // "987654321"

### 題目二

請使用 parseInt() 將以下字串轉型為數字：

let a = "1";
let b = "2";

a = parseInt(a);
b = parseInt(b);

let c = a + b;
console.log(c) // 3

### 題目三

請使用 toString() 將以下數字轉型為字串：

let countryCode = 886;
let myNumber = 123456789;

countryCode = countryCode.toString();
myNumber = myNumber.toString();

let myPhoneNumber = countryCode + "+" + myNumber;
console.log(myPhoneNumber) // "886+123456789"

### 常用的內建函式技術重點

- `trim()`去除頭尾空白
- `parseInt()`將資料轉為整數
- `toString()`將資料轉為字串

---

## 7/30 (五) 變數章節總複習

### 題目一

請問以下變數的值、型別分別為何？

let a = 1 + "我好棒"; // a = "1我好棒", String
let b = 1 * "我好棒"; // b = NaN, Number
let c = 2 > 1;       // c = true, boolean
let d = 1 < 2;       // d = true, boolean
let e;               // e = undefined, undefined

### 題目二

請利用賦值運算子計算冰箱布丁剩餘數量：
>情境題 布丁剩多少？
>冰箱裡原有 15 顆布丁
>被妹妹拿走了 3 顆
>被姊姊拿走了 5 顆
>媽媽又冰了 10 顆
>弟弟拿走了 2 顆

//請透過此變數進行運算
let puddingNum = 15;

puddingNum += -3 + -5 + 10 + -2;

console.log(`布丁還有${puddingNum}顆`) // 15 顆

### 題目三
小美去飲料店買了很多飲料，但她數學不好，請利用以下步驟算出幫小美算出購買總額：

> 1. 1 杯紅茶 30 元
> 2. 小美買了 2 杯
> 3. 她將紅茶數量 * 紅茶價格，算出 60 元
> 4. 1 杯綠茶 25 元
> 5. 小美買了 4 杯
> 6. 她將綠茶數量 * 綠茶價格，算出 ?? 元
> 7. 1 杯奶茶 50元
> 8. 小美買了 6 杯
> 9. 她將奶茶數量 * 奶茶價格，算出 ?? 元
>

//帳單從零開始計算
let bill = 0 ;
const blackTeaPrice = 30;
let blackTeaNum = 2;
bill += blackTeaPrice*blackTeaNum;
//請接續步驟指引4，協助小美算出帳單金額
const greenTeaPrice = 25;
let greenTeaNum = 4;
bill += greenTeaPrice*greenTeaNum;
const milkTeaPrice = 50;
let milkTeaNum = 6;
bill += milkTeaPrice*milkTeaNum;
console.log(`小美總共花了${bill}元`) // 460 元

### 題目四
請協助以下字串與數字轉型、過濾空白：

let number = "123";//將 number 轉型為數字
let string = 123;//將 string 轉型為字串
let myEmail ="  [e-mail]";//請將 myEmail 的空白過濾掉

number = parseInt(number);
string = string.toString();
myEmail = myEmail.trim();

---

{%hackmd @JohnsonMao/theme-Wood-Fired %}