JavaScript 小學-variable 變數

Jordan Tseng
JordanTTCDesign
Published in
4 min readNov 17, 2020

變數是什麼?

變數有點像是一筆資料或東西的代名詞,可以想成是手機通訊錄中,每一個電話號碼都很長,但是我們就是用一個名稱記住,當我們要使用那個號碼,就去找那個代名詞即可!!另外變數有一個 [變] 字,代表變數是可以被改變的,像是在家叫親生父親“爸爸”,但看到郭台銘也會不由自主的想叫“爸爸”一樣。

來看變數最常見三種型態:

  1. 數字❤️
  2. 字串❤️
  3. 布林❤️

數字變數Number

先說說如何宣告變數,就是用 var 命名,我們來做一個數字變數吧👍~

假設一個月薪變數是4萬🥳→

var monthlyPay = 40000;

我們可以利用 console.log()來檢查有沒有宣告到:

console.log(monthlyPay);//40000

剛剛說到變數是可以改變的,所以當我們加薪時,就可以改寫:

monthlyPay = 42000;

補充一個小知識:記得如果要用使用變數時例如:console.log(變數),必須要放在宣告後面不然就會變成 undefined 唷~

console.log(monthlyPay);//undefined
var monthlyPay = 40000;
console.log(monthlyPay);//40000

*因為變數是會提升 Hosting 的,所以上面程式碼他實際運作模式是如此:

var monthlyPay;
console.log(monthlyPay);//undefined
monthlyPay = 40000;//這時候才會賦予 40000 這個數值
console.log(monthlyPay);//40000

字串變數String

字串變數跟數字變數意思差不多,舉例誇張一點也是可以把一個很長的句子放在一個代名詞中:

var sayHi ="你好,我是Jordan,很高興認識你";

而放進去的這段文字是要使用雙引號”或單引號’包起來,用以區分字串跟變數的差異,像下面的程式碼,如果不包起來,不就區分不出來了嗎?

*記住選用一種就好,不然容易搞混🤯~

var jordan = 28;
var myName = "jordan";

另外變數和變數之間是可以相加的,把上面的 sayHi 變數拿下來使用看看:

var friend = "Zoe";
console.log(sayHi+friend) //你好,我是Jordan,很高興認識你Zoe

當然也可在一個字串宣告時加入另外一個字串,這時候就要使用+號來串連(這是經常使用的要記得)。

var sayBye ="Bye~"+friend+"明天見"

看到上面變數相加要寫那麼多 + 和“”是不是覺得有點煩?🤪🤪🤪🤪🤪

有時候還會眼花,少加上引號導致程式錯誤(我的切身之痛),所以在 ES6中新提供了一個方法字串模板 只要``用反引號把整段句子包起來即可。而在反引號中的變數只要使用$() 包起來即可,這樣就會很容易發現變數位置🧐

var sayBye =`Bye~$(friend)明天見`

甚至也能用 html 標籤呢,因為常常網頁上面內容不一定是直接寫在 HTML 中,而是用 JS 搭配後台資料傳遞產生的。

var productInfo =`<p>這個產品是${productName}蘋果最新發明</p>`

布林變數Boolean

布林值→非 true 即 false。一般用於判斷,簡單的用 if() 來舉一個例子,有女朋友的話就待在家,沒有女朋友就去 party 找一個。

var hasGirlFriend = true;
if(hasGirlFriend = false){
alert("I am going to party!");
hasGirlFriend = true ;
}else{
alert("Stay home with my girl");
}

*補充:以下值在 JavaScript 中會被判定為 false 要記得:

  1. null
  2. 數值 0
  3. NaN
  4. 空字串 ''
  5. undefined

命明變數規則

  • 開頭不能用數字
  • 不要使用 — 中線、_下底線、 . 點 → 例如:man.height,避免被誤判。
  • 大小寫有區分唷 → man 和 Man 是不同變數唷~
  • 不要命名一些已經被 js 使用的名稱 → 例如:function。
  • 不要自己亂縮寫或語意不明 → 例如:fmyAdress縮寫成 mAdr。

→因此建議:

  • 使用小駝峰式寫法:
var myName = "Jordan";
var myHeight = 172;
  • 使用語意化的方式命名,這樣過了很久再回來維護才不會忘記這是啥東西?
var gogogo = "台北市"//三小東西?
var myCountry = "台灣"

--

--