Day.13 「初步學習 JavaScript 基礎篇」 —— JavaScript 宣告變數 與 基本型別

前面已經大略介紹了 HTML 和 CSS 的入門知識了，接著我們要來認識 JavaScript，來為我們的網頁添加更多邏輯互動。

怎麼宣告變數？

JavaScript 是個弱型別語言，在宣告變數時，不像其他語言需要先指定型別那麼嚴謹，宣告的變數名會對應記憶體位子，把其值存入記憶體中，之後要取出值，只要藉由變數名，就能找到對應的值。

要幫變數命名也是有規則的，首先保留字（如：class）與關鍵字（如：var），不能用於變數名，變數名不能由數字作為開頭，且變數名有大小寫之分，可以使用$、_在名稱中。常見的命名法為駝峰命名法，如：petName、pet_name。

目前宣告方式有 3 個（含 ES6）

什麼是 ES6？ ES6 正式名稱為 ECMAScript 2015，是第六版 ECMAScript，因此簡稱 ES6。
ES6 增加了原本 JavaScript 沒有的語法，能更加方便使用與維護，但有些瀏覽器兼容性可能不好（如：IE）

• var，JavaScript 最原始的宣告方法，使用起來很簡單暴力，屬於全域宣告，可以在函式作用域做區隔，因為容易汙染全域變數，所以目前比較少使用了。
• let，ES6 新增的宣告方法，let 與 var 最大的不同就是區域作用域（block scope），比較不會有汙染問題。
• const，ES6 新增的宣告方法，const 最大的特色是屬於常數宣告，常數宣告的意思是不能隨意改值，降低不小心更改所導致的 bug，需注意 因為是常數宣告，無法隨意改值，所以使用常數宣告一定要賦予值，否則會報錯。

何謂常數？ 就像是圓周率 π 就是數學常數 3.14159，並不會隨意更改。

變數的基本型別

JavaScript 的基本型別

• string 字串型別，這個型別很簡單，只要是使用 " 、 ' 包起來的就是字串型別，另外 ES6 還新增了樣板字面值 ‵，使用起來更加方便靈活，還能套用變數，注意 包起來的符號要一樣的才可以。

  • "string" 頭尾都是使用 "
  • 'string' 頭尾都是使用 '
  • 'string" 交錯使用會報錯。
  • 如果字串內要使用 ' 則需要使用 " 來包，如："I'm Mao"，反之亦然。
  • ES6 新增的樣板字面值，‵string ${ 變數名 }‵ 頭尾都使用 ‵，要使用變數可以在裡面使用 ${} 來使用。

• number 數字型別，這個型別代表數字，以下這些都是數字型別

  • 不管是正負數、小數點都是。（如：0, 9, -8, 7.6）
  • Infinity（無限大）
  • -Infinity（無限小）
  • NaN（Not a Number，非數字）

• boolean 布林值，這個值就非常的單純許多，只有 true 與 false，這兩個值，主要是使用在判斷式中，在 Javascript 中，任何值都能轉換成布林值。

• undefined 未定義型別，只有一個值 undefined，代表這個變數還沒定義型別。

• null 空值，只有一個值 null ，代表這個變數目前定義為沒有值。

• object 以上基本型別以外的都是Object 物件，物件這個東西比較複雜，我們之後在細細品味。

如何知道變數的型別？

可以使用 JavaScript 中用來判斷型別的運算符 typeof，使用方法如下

var a;
let n = null;

typeof "I'm Mao"; // string
typeof NaN;       // number
typeof true;      // boolean
typeof a;         // undefined
typeof n;         // object
typeof {};        // object
typeof [];        // object

欸～這時會發現奇怪的事情，null 給出的型別怎麼是 object 呢？ 這其實是一開始 Javascript 設置實作時產生的 bug！

JavaScript 的值是由一個表示型別的標籤，與實際內容的值所組成。
由於物件型別標籤是 0，而 null 代表的是空值（通常以 0x00 表示），導致物件與空值的標籤搞混，而產生的結果。
內容取自 008 天 重新認識 JavaScript

既然 JavaScript 已經不打算修復這個 bug 了（應該說一改會牽動到很多東西，就乾脆不改了），我們就 想像 null 是空物件吧，實際上並不是唷！

如何分辨 NaN

這時會很困擾，會發現一般數字與 NaN 檢查型別都是回傳 number，要判斷數字型別是否為 NaN。
可以利用 JavaScript 提供的 isNaN() 來進行判斷！

let n = NaN;
console.log( isNaN(n) );  // true

如何轉型別？

有的時候我們宣告變數使用var a = "1"，那麼 a 是的型別是什麼？ 聰明的你應該馬上就知道是字串（string）型別了吧！
那麼如果想要把 a 轉型成數字（number）型別，就可以使用轉換型別的語法，剛好來介紹一下轉換型別的語法吧！

轉換型別語法：

• 轉換成字串（string）型別：
  • toString()，使用方法a.toString()就能轉換成字串型別，但遇到 null 或 undefined 會報錯
  • String()，使用方法String(a)就能轉換成字串型別，遇到 null 或 undefined 也不會報錯
  • 變數直接加空字串，使用方法 a + '' 就能轉換成字串型別。
• 轉換成數字型別
  • Number()，任意資料型別轉換成數字型別。
  • parseInt()，將字串或數字轉成整數。
  • parseFloat()，將字串或數字轉成浮點數。
  • 變數前面使用 + 一元運算子 或後面使用 *1，使用方法 +a 或 a *1 就能轉換成數字型別。
• 任何型別都可以轉換成 布林值
  • true
    • 任何非空字串的值
    • 任何非 0 的數字
    • 任何物件
  • false
    • 空字串（'' 和 ""）
    • 數字 0 和 NaN
    • null 和 undefined

總結

終於開始學習程式語言了，今天認識了基礎的宣告變數與型別判斷，蠻推薦 Kuro 大大寫的 008 天 重新認識 JavaScript，寫得十分有趣清楚，下一篇章先進入我們的運算符篇。

參考資料

• 008 天 重新認識 JavaScript