# JavaScript Template
JavaScript模板常被用來解決重複編寫程式碼的問題（尤其是處理字符串和物件）。不過ES6推出後，工程師不用在使用第三方套件就已經有相當多的語法糖可以使用。
>語法糖（Syntactic sugar），也譯為糖衣語法，是由英國計算機科學家彼得·蘭丁發明的一個術語，指計算機語言中添加的某種語法，這種語法對語言的功能並沒有影響，但是更方便程式設計師使用。語法糖讓程序更加簡潔，有更高的可讀性。

## ES6
#### Template Literals 字串樣版 `${}`
- 多行字串
- 字串中插入變數
- 字串中插入表達式

//過去寫法
let fruit = [apple,banana,coconut]

let originString = '我喜歡吃 ' + fruit[1]; // 單行寫法: 用+連接字串與變數

let originUl = '<ul>\
  <li>我喜歡吃 ' + fruit[1] + '</li>\
  <li>我喜歡吃 ' + fruit[2] + '</li>\
  <li>我喜歡吃 ' + fruit[3] + '</li>\
</ul>'; // 多行寫法: 用\表示換行

//ES6寫法
let ES6String = `我喜歡吃 + ${fruit[1]}`;  //使用反引號``包住字串範圍 //${變數}

let ES6Ul = `<ul>
  <li>我喜歡吃${fruit[1]}</li>
  <li>我喜歡吃${fruit[2]}</li>
  <li>我喜歡吃${fruit[3]}</li>
</ul>`;

let ES6Expression=`${fruit.map(fruit => `<li>我喜歡吃 ${fruit}</li>`).join('')}`

#### object shorthand 物件縮寫
- 物件縮寫
- 物件屬性為變數

let newToy = '巴斯光年'

const oldToys = {
  Sheriff Woody: '胡迪警長',
  Buzz Rex: '抱抱龍',
  Mr. Potato Head: '蛋頭先生',
  // ...
}

let others = 'toystore';
let otherToys = '三眼怪';

// 過去寫法
const ToyStory = {
    newToy: newToy,  //變數
    oldToys: oldToys,   //變數物件
    welcomeParty: function () {
        console.log('我們都是一家人')  //物件函式
  }
}

// ES6寫法
const ToyStory = {
    newToy,
    oldToys,
    welcomeParty(){
        console.log('我們都是一家人')
    }
    [others]: otherToys  //物件屬性可以是變數!
}

#### ... 的用法
[詳細看這](https://hackmd.io/c3oVqPPARmqUSKBO-XQ0LQ?view#%E2%80%A6-Spread-Operator--Rest-Operator)

#### 大家期待的問題

// 01 
const [a] = 'hello'

console.log(a)  //a=h

// 02
const { b } = 'hello'
const { c ='hello' } = 'hello'
const [ d ='hello' ] = 'hello'

console.log(b,c,d) //undefind hello h

// 03
function func({e, f}) {
  return e + f
}

func({e:2,f:3}) // e=2 f=3 return 5

// 04
function func({g = 3, h}) {
  return g + h
}

func({g: 1, h: 2}) // 3
func({h: 2}) // 5
func({g: 1}) // NaN //數字遇上undefined就會是NaN

## 附錄： ECMA
> ECMA 是 European Computer Manufacturers Association (歐洲電腦製造商協會) 的簡稱，協會在 1961 年正式成立，是資訊和通訊系統的標準組織。
> 後來為了因應國際化，在 1994 年將名稱改為 Ecma International (Ecma 國際)。

#### ECMA規範包括:
* ECMA-119：CD-ROM 格式
* ECMA-334：C# 語言規範
* ECMA-408：Dart 語言規範
* ECMA-404：JSON
* ECMA-262：ECMAScript 語言規範
* ......
> ECMA規範制定流程是由包括瀏覽器廠商在內的各方組成，開會推動JavaScript提案。
> 最終入選後還會再經歷以下四個階段：
> * 【Stage 1】proposal： 至少一名成員提供的正式提案文件，該文件包括API實例。
> * 【Stage 2】draft: 功能規範的初始版本，該版本包含功能規範的兩個實驗實現。
> * 【Stage 3】candidate: 提案規範通過審查並從廠商那裡收集回饋。
> * 【Stage 4】finished: 提案準備加入ECMAScript。

**ECMAScript**
ECMAScript 是由 Netscape 的 **Brendan Eich** 發明的，最早出現在 Netscape 的 Navigator 2.0 瀏覽器中。從 IE 3.0 開始，很多瀏覽器開始使用 ECMAScript。

ECMAScript 是 JavaScript 的標準，目的是讓不同瀏覽器之間能根據 spec 來實作。當 ECMAScript 發布第三版 (即 ES3) 之後，成為當時所有瀏覽器支援的程式語言。


#### 參考資料
https://www.w3schools.com/js/js_es6.asp
https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/destructuring.html
https://wcc723.github.io/javascript/2017/12/23/javascript-short-hand/
https://hsueh-jen.gitbooks.io/webcrawler/content/lesson-3-pa-chong-tao-jian/lodash.html
https://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html