JavaScript 小學-variable 變數
變數是什麼?
變數有點像是一筆資料或東西的代名詞,可以想成是手機通訊錄中,每一個電話號碼都很長,但是我們就是用一個名稱記住,當我們要使用那個號碼,就去找那個代名詞即可!!另外變數有一個 [變] 字,代表變數是可以被改變的,像是在家叫親生父親“爸爸”,但看到郭台銘也會不由自主的想叫“爸爸”一樣。
來看變數最常見三種型態:
- 數字❤️
- 字串❤️
- 布林❤️
數字變數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 要記得:
null
- 數值
0
NaN
- 空字串
''
undefined
命明變數規則
- 開頭不能用數字
- 不要使用 — 中線、_下底線、 . 點 → 例如:man.height,避免被誤判。
- 大小寫有區分唷 → man 和 Man 是不同變數唷~
- 不要命名一些已經被 js 使用的名稱 → 例如:function。
- 不要自己亂縮寫或語意不明 → 例如:fmyAdress縮寫成 mAdr。
→因此建議:
- 使用小駝峰式寫法:
var myName = "Jordan";
var myHeight = 172;
- 使用語意化的方式命名,這樣過了很久再回來維護才不會忘記這是啥東西?
var gogogo = "台北市"//三小東西?
var myCountry = "台灣"