---
title: 'JS 影音 3 - 數字型別與賦值運算子、字串型別'
tags: JS 直播班 ,JS , JavaScript, ES6
description: 2021/02/06
---

JS 影音 -- 數字型別與賦值運算子、字串型別
===

## 數字型別 與 賦值運算子
### 賦值運算子 += 、 -=

let a = 50; 
a = a + 100;     // 取出 a 變數，並重新賦予新值，此時 a 為 150
a = a + 150;     // 取出 a 變數，並重新賦予新值，此時 a 為 300
console.log(a);  // 300

:pencil2: **範例 : 使用賦值運算子寫法**
小明錢包有 50 元，小明存了 200 元進去，後來又存了 150 元，請問小明錢包共有多少錢 ?

let a = 50;
a = a + 200;   // 使用賦值運算子寫法
a += 150;      // 縮寫
console.log(a);  // 400

### a++ 、 a --

let a = 0;
let b = 0;
a++;  // 針對自己的數值再加 1
a++;
b++;
console.log( "a 為" + a , "b 為" + b);  //  a為2  b為1

### :bulb: 作業
「阿貓與阿狗玩棒球，要記錄比分。
流程一：第一回合，阿貓得 3 分，阿狗得 2 分。
流程二：第二回合，阿貓得 20 分，阿狗得 3 分。
流程三：中間有插曲，就是阿貓作弊，第二回合才得 2 分卻謊報 20 分，所以必須扣掉 18 分。
流程四：第三回合，阿貓得 1 分，阿狗得 7 分。
請問雙方總得分各是幾分 ? 比了幾回合 ?

let roundNum = 0;
let catScore = 0;
let dogScore = 0;

roundNum++;      // 第一回合
catScore += 3;
dogScore += 2;

roundNum++;      // 第二回合
catScore += 20;
catScore -= 18;  // 阿貓作弊，扣掉 18 分
dogScore += 3;

roundNum++;      // 第三回合
catScore += 1;
dogScore += 7;
console.log(`總得分：阿貓 ${catScore} 分、阿狗 ${dogScore} 分`);    // 阿貓 6 分、阿狗 12 分
console.log(`總共比了 ${roundNum} 回合`);  // 比了 3 回合

### :bulb: 作業 -- 鍛鍊：拆解任務流程與設定變數
「幫媽媽跑腿，紀錄花了多少錢，與跑腿了幾次」
小明的媽媽請她跑腿，因為小明一天規定自己只能出門三次，所以和媽媽說最多跑三次腿
小明媽給了小明 300 元，請他去買兩罐牛奶跟兩份吐司，小明到超商後看到牛奶 30 元吐司 20 元
當她到櫃台結帳時，櫃台告訴他剛好今天全部品項都打 5 折 !
買回家後，媽媽發現小明的東西都有買齊，就讓小明去玩耍了。
<span class="green">請試著拆解流程，並透過註解告知您的解題流程。
最後兩行 code 請用 console.log 印出最後小明花完剩下多少錢，以及當天還能跑腿幾次的變數。 </span>

let goTimes = 3;  // 規定自己只能出門3次
let myMoney = 300;
let milkNum = 2;
let toastNum = 2;
let milkPrice = 30*0.5;  // 打 5 折
let toastPrice = 20*0.5; // 打 5 折
let total = myMoney - (milkNum*milkPrice + toastNum*toastPrice);

goTimes--;   // 幫媽媽買牛奶跟吐司
goTimes--;   // 小明去玩耍

console.log(`小明花完剩下 ${total} 元，當天還能跑腿 ${goTimes} 次`);
// 小明花完剩下 250 元，當天還能跑腿 1 次

## 字串型別
### 宣告字串流程
字串一定要成對加上 **'單引號' 或 "雙引號"** ， 不然 JS 會以為是數字型別。

let a = 'Hello';
let b = '你好嗎 ?';
console.log(a, b);  // Hello 你好嗎 ?

### 字串相加

let a = 'Hello';
let b = '你好嗎?';
let total = a + '  ' + b ; // 加上一個半形空白
console.log(total);        // Hello 你好嗎 ?

### 透過 typeof 瞭解當前變數型別
變數沒有型別，變數可在不同時間點持有不同型別的值，因此，只有「值」才有型別。雖然我們可用 typeof 檢測某個變數所儲存的值的型別，但記得並不是檢測變數本身，而是變數所存的值。

typeof null;          // 'object'
typeof undefined;     // 'undefined'
typeof function() {}; // 'function'
typeof NaN;           // 'number'

### 自動轉型
> **數字與字串相加 : 數字自動轉型為字串**

let a = 'Tom';
let age = 18;
let total = a + age;
console.log(total);         // Tom18
console.log(typeof total);  // String

let c = '小美';
let weight = 55;
console.log(`HI 我是${c} ， 我體重 ${weight} 公斤`);  // HI 我是小美 ， 我體重 55 公斤

> **NAN 非數字 (屬數字型別) : 無法相乘，回傳 NAN**

let myName = 'Tom';
let age = 18;
let total = myName * age;
console.log(total);         // NAN (回報異常)
console.log(typeof total);  // Number

> **parseInt ( ) : 把原本的字串變成數字型別**

let a = '20';
console.log(typeof a);  // String
a = parseInt(a);        // 把字串變成數字型別
console.log(a);         // 20
console.log(typeof a);  // Number

> **若把非數字的字串使用 parseInt ( )，就會出現 NAN**

let myName = parseInt('Tom');
console.log(myName);         // NAN  (回報異常，不是數字)
console.log(typeof myName);  // Number 確實轉成數字型別

### 字串處理實用方法
#### 使用 a.length 來查詢字元的長度

let youName = ' Mark ';
console.log(youName.length);  // 有 6 個字元 (含空白字元)

#### 使用 String.trim( ) 把多餘的<span class="red">前後空白</span>濾掉，並回傳成新字串
<span class="red">一定要再重新賦予值才正確</span>

youName = youName.trim();     // 把前後空白濾掉，並重新指向賦予新值
console.log(youName);         // Mark (前後空白去掉了)
console.log(youName.length);  // 有 4 個字元

### 變數記憶體 value 指向
使用**等於**賦予、指向新的變數記憶體

let myEmail = '  Tom  ';  // 前後含2格空白
let nameLength = myEmail.length;
console.log(myEmail);     //   Tom    (前後含2格空白)
console.log(nameLength);  //  7

myEmail = myEmail.trim(); // 使用等於指向新的記憶體空間，並賦予新值
nameLength = myEmail.length;
console.log(myEmail);     //  Tom (前後已無含2格空白)
console.log(nameLength);  //  3

### 樣版字面值教學

使用字串相加寫法

let myName = 'Tom';
let myAge = 18;
let content = "您好我是" + myName +"我今年" + myAge + "歲";
console.log(content);     // 您好我是Tom我今年18歲

使用 ES6 寫法
* 此寫法減少很多加號、雙引號
* 段落前後使用反引號 (ㄅ按鍵旁邊)，並使用 $ { } 來存放變數

let content = `您好我是 ${myName} 我今年 ${myAge} 歲`;

## :+1: 相關參考文件
:::info
[你懂 JavaScript 嗎？#4 型別（Types）](https://cythilya.github.io/2018/10/11/types/)
:::

<style>
.red {
color: red;
}
.green {
color: green;
}
.green {
color: green;
}
</style>