前情提要

艾草：「好了，現在我們可以開始入門魔法課程 JavaScript 變數與值的教學囉！」

「耶～總算要開始了嗎！來吧！」

艾草：「萬事起頭難，離你成為大魔法師不遠的，加油～」

前言

今天要來學習變數，學習變數前先來看一張圖：

這張圖用中文描述就是：我宣告了一個變數，其名為 a，我賦予了它數值 1 。

文章內會常常提到這張圖唷！

變數（ Variable ）與值 ( Value )

變數命名

如前言的附圖 let a = 1; a 為變數的名稱，通常在替變數命名時我們可留意以下規則：

• 命名盡量語意化
• 不可以使用保留字命名
• 統一命名規則
• 可使用小駝峰式命名

小駝峰式命名：第一個單字以小寫字母開始；第二個單字的首字母大寫，例如：firstName、lastName。
參考文章：https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB

對，沒有錯！我的附圖 let a ; 只是為了給大家一個錯誤範例觀看（絕對不是因為我懶），千萬不要未來在程式碼上直接命名 a,b,c 等，毫無語意的名稱，這樣下次回來看自己的 Code 時一定滿頭霧水，沒準還把同事們雷的不要不要的。

大家在命名變數時一定要秉持著不要相害的精神，這樣世界就能越來越和平的（？

講完了變數的命名讓我們來談談值吧！

值的原始型別

為什麼要特別提到值的原始型別呢？

因為變數沒有型別，變數被賦予的那個"值"才是有型別的，這邊可以對應前言附圖提到的我賦予了它數字 1 的部分。

型別的種類又分別有原始型別（Primitive Type）與物件型別( Object Type )，我們先針對原始型別來講解，物件型別留到物件章節再來介紹。

原始型別（Primitive Type） 共有以下七種：

文章內會介紹到前面五種型別。

• 數字(number)
• 字串(string)
• 布林(boolean)：僅兩個值 true 、 false 。
• null：表示被賦予值空值
• undefined：表示尚未被賦予值
• Symbol
• BigInt

這邊也來教如何判斷變數的型別，可以使用 typeof 來判斷：

let a = 1;
console.log(typeof a)//"number"

值得留意的是 typeof 會回傳字串值，而該字串值會回傳運算元所代表的型別。
底下範例程式碼註解為了方便檢視，透過 typeof 檢視型別時，除字串型別，其餘型別雖回傳字串值，但不會特別包覆雙引號。

數字(number)型別

數字型別就是數字（廢話，以下來宣告一個變數 a 並賦予它數字型別 1：

let a = 1;

數字也可以搭配常見運算子做各式運算，方法如下：

1+1;//加
1-1;//減
1*1;//乘
1/1;//除
1**1;//平方
1%1;//取餘

也可以利用賦予值給變數的方式去做運算。

let a = 1;
let b = 1;
let c = a * b;

number 型別也支援小數點與負數，但在使用小數點時要特別留意 JavaScript 使用浮點數運算的關係，在數字的精度上會有一定的落差，所以才會發生 0.1 + 0.2 ≠ 0.3 。

講到 number 型別可以運算，那我們來嘗試把它跟字串拿來運算吧（住手！

那可能得到以下兩種結果：

//情況一
let a = 1;
let b = "1";
let c = a * b;
console.log(c)//1
console.log(typeof c)//number

//情況二
let d = 1;
let e = "很棒";
let f = d * e;
console.log(f)//NaN
console.log(typeof f)//number

在情況一數值1乘上字串1時，JavaScript 會很貼心(?)的幫你轉型，所以可以很正常的運算出來，而情況二是根本不可能去運算的情況，就會顯示 NaN。

NaN 的型別為 number ，其實代表的是 Not a number，在你嘗試胡亂運算時，就可以看到它出來抗議！

另外因為 NaN 型別為數字型別，所以有時候難以判斷某個值是否是 NaN，此時就可以使用 isNaN() 來判斷！

NaN 知識點

• NaN 是數字型別
• NaN 代表 Not a number
• NaN 產生時機為無法計算出結果時
• 可以使用 isNaN() 來判斷是否為 NaN

接下來，來聊聊賦值運算子吧。

數字型別與賦值運算子

賦值運算子包含 +=、-=：

let a = 1;
a = a + 1;
a += 1; // a = a+1; 的縮寫

以上就是 +=、-= 的用法，接下來來聊聊 a++、a--:

a = a + 1;
a += 1;
a++; //三者皆達成 +1

其實 a++、a-- 就是對前面的變數 a 執行+1或-1，比較特別的是 a++、a-- 不用使用 = 也有被賦予給變數了，這點要特別注意！

數字型別轉型字串型別
有些情境下，我們會需要將數字轉型成字串。
例如要將電話號碼連結在一起時：

let countryCode = 886;
let myNumber = 987654321;

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

let myPhoneNumber = countryCode + "+" + myNumber;
console.log(myPhoneNumber)//"886+987654321"
console.log(typeof myPhoneNumber)//"string"

如上使用 toString() 成功轉型出我們要的電話號碼囉！

知識點：賦值運算子

• 可以使用 a += 1 、 a -= 1 來縮寫 a = a + 1、a = a - 1
• a++、a-- 雖然沒有 = ，但會幫該變數執行 +1、-1

總結：數字型別

• 數字型別可以搭配常見運算子運算，包含 + - * / ** % 等
• NaN 也是數字型別
• 數字型別可以使用 toString() 轉型成字串
• 數字型別可以搭配使用賦值運算子來運算

字串(string)型別

let a = "我好棒";

字串型別外層要使用單引號或雙引號包覆起來，如果沒有包覆起來會被誤會是變數，而包覆時要留意全都使用單引號、或都使用雙引號，兩邊用不同引號包覆，會報錯！

如果字串裡面有包含 ’ 例如英文縮寫會使用到 ’ 時，外層請使用雙引號區分，要將兩段字串連結在一起可以使用加號：

let a = "我好棒";
let b = "It’s nice of you.";
let c = "我好棒" + "It’s nice of you.";//字串連結
let d = a + b;//也可透過此方式連結字串
console.log(d)//"我好棒It’s nice of you."

另外其他型別與字串型別相加，會被轉型成字串，如下：

let a = "1";
let b = 6666;
let c = a + b; 
console.log(typeof c)//"string"

比較特別的是使用 -、*、/、%、** 等算術運算子去運算時，因為 JS 會透過 Number()幫你先嘗試看看能不能轉型成數字去計算，所以如果該字串是能轉型數字的，會變成數字型別，如下：

let a = "1";
let b = 6666;
let c = a - b;
console.log(typeof c)//number

字串的實用方法
可以使用length來查看字串的字元數。

console.log("123456".length)//6
console.log("我很棒".length)//3

空字元也會被計算，為了避免這種情況可以使用 trim() 來過濾掉字串前後的空白。

let myEmail = " 654789@gmail.com";
myEmail = myEmail.trim();
console.log(myEmail)//"654789@gmail.com"

知識點：字串的實用方法

• 可以使用 length 來查看字元數
• 可以使用 trim() 來過濾前後空白

字串型別轉型數字型別
很多時候，我們會需要將字串轉型成數字去做計算，可以透過 parseInt() 來實現：

let a = "1";
a = parseInt(a);
console.log(typeof a)//number

如此就完成字串轉型數字囉！

總結：字串型別

• 字串型別要留意外層要包覆起來，才不會被誤認成變數
• 純值與字串型別相加會變成字串型別
• 可轉型為數字的字串型別使用 -、*、/、%、** 會被轉型成數字運算
• 字串型別可使用 length 查看字元、可使用 trim() 過濾空白
• 字串型別可使用 parseInt() 轉型數字

布林(boolean)型別

布林就只有兩個值 true 、 false，通常會拿來與 if 配合，看有沒有符合條件，有就 true 沒有就 false。
剛開始學時很好奇為啥要叫布林，後來才知道是以發明布林代數的數學家喬治·布爾為名。

布林可以直接用賦予值的方式：

let a = true;

或是比較的方式：

let a = 2 > 1;//true

總結：布林型別

• 布林只有兩個值 true 、 false
• 布林常用於流程判斷

undefined 、null

把這兩個型別放在一起是因為它們比較可能被搞混，undefined、null 都只有一個值，分別就是 undefined 跟 null。

首先，先來了解如何宣告變數並賦予 undefined 的值：

let a = undefined;

或我們尚未宣告時，其實該變數也是暫時被賦予 undefined：

let a;
console.log(typeof a)//undefined

接下來，來看一下如何賦予 null 的值：

let a = null;
console.log(typeof null)

我們宣告了變數，但尚未賦予該變數值時，該變數會先被賦予 undefined ，而 null 則可以拿來賦予變數空值，可用於清空某筆不需要的資料。

其實這兩者最大的差異點在：

• null 有被賦予值，被賦予了空值
• undefined 通常指尚未被賦予值

補充：查詢 null 型別時會看到 object ，需要特別留意。

小練習

學完了原始上述值的原始型別，來做個小練習題，請問以下 console.log 分別會印出什麼呢？

//1
let a = 3 + "3";
console.log( a, typeof a);//?

//2
let b = 4 * "4";
console.log( b, typeof b);//?

//3
let c = 1 * "你好棒";
console.log( c, typeof c);//?

//4
let d = "12";
let e = 12;
d += e;
e = e.toString();
e++;
console.log( d , e);//?
console.log( typeof d , typeof e);//?

//5
let f = 3 < 2;
console.log( f , typeof f)//?

答案可以透過開發人員工具的 Console 檢視。

接下來，讓我們來了解變數是如何宣告的！

參考文獻

JavaScript 必修篇 - 前端修練全攻略(六角學院)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Data_structures
https://ithelp.ithome.com.tw/articles/10190873