內文摘要

• ECMAScript 與 JavaScript? ES6？
• JavaScript 資料型別(Data Types)
• 型別判斷
• 型別轉換

參考資料1：MDN — the Mozilla Developer Network
參考資料2：從ES6開始的JavaScript學習生活

前言

這系列文章預計前十篇會先打穩純JS的基本功並實作一兩個小玩具，接著重點比較更現代的TypeScript與JS之間的差異；最後保留十至十五的篇幅試著深入一門現代的前端框架，看看三十天後我們能一起做出什麼好玩的作品。

希望大家一起玩得開心。
Happy Hacking.

JavaScript與 ECMAScript? ES6？

不曉得各位學習道路上的伙伴有沒有人跟我一樣經常在閱讀JS文章的時候看ECMAScript而感到困惑？ES6又是什麼呢？

JavaScript：一門程式語言
ECMAScript：一份針對JavaScript的國際應用標準規範，雖然ECMAScript不具絕對約束力，但已很高程度能相容於各主流瀏覽器，如：Chrome, Firefox, Safari等；因此當我們按ECMAScript寫出來的一份程式碼可以在各大瀏覽器被順利讀取，不受限用戶偏好使用什麼瀏覽器。

ES6瀏覽器相容表 compatibility table

網路與瀏覽器剛誕生的時代百家爭鳴，大家都想佔有一席之地因而衍生各種標準，如同帶著新台幣100元到隔壁的香港、日本沒辦法使用(各式各樣JS寫法)，此時信用卡這種挟帶全球通用標準的支付工具(ECMAScript)便能大大降低差異帶來的不便。

ES6：標準整合總有陣痛期，歷經多年來多次改版，2015年推出的第6版ES6(ES2015)涵蓋許多強大的新功能將JavaScript可用性推到新高點，因此當代前端工程師絕對不能不熟悉ES6標準呢。

JavaScript 資料型別(Data Types)

資料「型別」也有人稱資料「類型」，JavaScript型別就兩大類：基本型別 Primitives與物件Object

基本類型(Primitive Data Type)，共6種：

1. 字串 string

   • JavaScript中，字串使用Unicode(變數命名也是，意味著不能用數字開頭來命名)
   • 樣版字串嵌入 template literal：

     let emperor = `Napoleon I`
     let profile = `請問哪位法國皇帝出生於科西嘉島？
     答案：${emperor}`;
     
     console.log(profile) // `請問哪位法國皇帝出生於科西嘉島？
     答案：Napoleon I`
     

     ps. 內嵌運算式也可以喔

2. 布林值 boolean

   • true, false 嘿嘿如果布林值可沒這麼簡單喔，下段的falsy型別轉換可有些燒腦
   • (Airbnb 23.3) 如果屬性(變數/常數)或方法(函式)是一個布林值，使用像isVal()或hasVal()的命名。
   • JavaScript中驚嘆號(!)是邏輯運算符：
     !代表某值是不是對的、有的：true；
     !!代表某值是不是錯的、沒有：false

       const aBool = true
       const bBool = !aBool //b是不是等於a? false
       const cBool = !!aBool //c是不是不等於a? true
     

3. 數字 number

   • JavaScript只有一種數值型別：number；其中有幾種特別的數字：Infinity、-Infinity、NaN (Not a Number)
   • Number(n) 可以將除了undefined以外的任何資料轉換為number
   • IEEE 754 double-precision 二進位浮點算術標準：
     意味十進位小數無法完美使用二進位處理，若真有數字精準的需求可另尋其他方法解決，此外如果需要非常多計算通常計算邏輯應該會放後端

4. 空 null

   • 空(null)就是空值，代表的是沒有值
   • 當你對 null 進行運算，null 會自動轉換成數值 0，如果當做布林值運算，會被當成 false，舉例來說：

var n = null;
console.log(n * 32); // Will log 0 to the console

5. 未定義 undefined

   • 未定義(undefined)即是尚未被定義類型，或根本不存在 (ex. console.log 未賦值的變數會得到 undefined)

6. 符號 Symbol(ES6新增)

註1: 除了物件以外的所有值，都是原始定義的值（值意味著不能被改變）。例如與 C 不同的地方，就是字串是不變的。我們引用這些類型的值為 primitive values（原始值）。
註2: JavaScript的確是一個物件導向的程式語言。不過，JavaScript的物件導向特性與其他常見的物件導向語言例如Java、C++等有很大的不同。

物件 Object (另寫於JS雜拾-04)

• 物件 object
• 陣列 array

判斷資料類型

1. 其實是判斷數、常數的『值』
2. 多數時候使用typeof (關鍵字)，舉例：

console.log(typeof 37) //'number'
console.log(typeof NaN) //'number'
console.log(typeof '') //'string'
console.log(typeof (typeof 1)) //'string'
console.log(typeof true) //'boolean'
console.log(typeof {}) //'object'
console.log(typeof []) //'object'

console.log(typeof null) //'object'
console.log(typeof function(){}) //'function'

2. 例外狀況

• null會回傳'object'，可以改用：

const n = null;

if (!n && typeof n === 'object') {
  console.log('我是 null！');
}

• array會回傳'object'，因此改用：

let a = [];
Array.isArray(a) // true

• object會回傳'object'，因此改用：

let b = {};
b instanceof Object // true

• 檢查變數是否為NaN：

isNaN(變數)

資料型別轉換

1. JavaScript是弱型別語言也稱動態程式語言(dynamic language)"，其鬆散資料類型(loosely typed)的特性意思是不需要在定義變數、常數時，就規定資料類型。我們只需要給值，JavaScript就會依照指定值決定變數、常數資料類型<-- TypeScript可以大幅改善這一不可控的問題。舉例：

let foo = 42    // foo現在是Number資料類型
let foo = 'bar' // foo現在是String資料類型
let foo = true // foo現在是Boolean資料類型

2. falsy與短路求值

• "false家族成員"：
  falsy 包含 0, -0,NaN,null, false, undefined, 空白字串('')與false值
  * "falsy"的概念在JavaScript的邏輯運算，以及布林值中都是很重要的概念。除了上述提到的(Logical NOT)(!)，還有兩個邏輯運算符也很常用到:與(Logical AND)(&&)、或(Logical OR)(||)，在經過邏輯與(&&)與邏輯或(||)的運算後，它的回傳值是最後的值(Last value)，而非布林值；也就是說像下面這樣的程式碼，基本上它的回傳值都不是布林值，而是其他資料類型
  console.log('foo' || 'bar') // 'foo' console.log(false || 'bar') // 'bar'
  "falsy"更擴大了這種運算範圍，因此出現了一種常見的簡短寫法："指定預設值"，範例:

        ```
        let a = value || 5 // 5是預設值
        ```
  

不過，這樣的指定預設值的寫法，並不能完全精確判斷value屬於哪一種資料類型與值的方式，在某些情況下會出現意外，例如你可能認為value=0也是合法的值，但value=0時，a會被短路求值成5。所以，只要當value是"falsy"時，變數a就會被指定為預設值5。所以在使用時還是需要特別注意，不然你會得到出乎意料的結果。

題外話

全球資訊網路 World Wide Web，又稱the web、WWW，是由Sir Timothy John Berners-Lee 1989年在位於瑞士的歐洲核子研究組織CERN工作時發明的。以前只知道CERN主要研究核能粒子加速器之類高等物理，沒想到跟呼吸一樣重要的生命第四元素：網路，也發源於CERN。

而負責規範全球資訊網路標準的W3C(World Wide Web Consortium，又稱W3C理事会)不意外地也是由Sir Berners-Lee所創立。

至於跟Java一點關係也沒有的JavaScript爸爸：Brendan Eich，不僅協助創立Mozilla.org也曾任其執行長，所以透過MDN — the Mozilla Developer Network 學習應該是個可靠的好主意。