# 第三十六關 - ES6 起步走 - Template String 樣板字串

## 實作
* https://codepen.io/LuckyTiger/pen/abdxKgp
因為之前就用 ES6 樣板字串來寫，所以這次來試試看那天[大神來六角直播學到的圖片轉 Base64 文字編碼](https://www.facebook.com/groups/110635703123103/permalink/712689356251065/?__cft__[0]=AZVzQCe-G89sEiCpwxdpW3cnZrXiqgPsT9EScLJXen0QUIB7MbjMW1EuOB19jMthjm2EuA_H3kfVEKGhSVtX2CnG6gdnkOYW6fGX_1JmRkdwtWRnSz83xgl25lH0Yvk9TkFqxQMmy2MAliWiptk5ImanVr2Sk6ir08COzedXjwg1eiqpZjEyJx3zCgVspcjbWwQ&__tn__=%2CO%2CP-R)，將原本 logo src 轉成不用連線的。
* https://b64.io/ 圖片轉 Base64 文字編碼
### Base64格式
`data:[][;charset=][;base64],`
:question: 同學可以猜猜 codepen 實作中，是放在哪邊使用

### Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

### Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

## 觀摩同學
> 大家早，第36關想要跟大家分享的是JS裡面的Event queue
> 在第[35關實作](https://codepen.io/LuckyTiger/pen/KKVYxzv)時，以為只要宣告全域變數之後，接著在axios裡面賦予其值，就能夠將全域變數拿出來使用
> 後來發現圖表沒有順利呈現，接著詢問老師才得知Event queue這個內容，在這裡分享給大家，希望有幫大家解決一些疑惑。
> @Jim
> * [一次只能做一件事情的 JavaScript，解釋 Event queue 怎能不用動畫呢](https://ithelp.ithome.com.tw/articles/10190925)

// 原來 function load()是這麼來的，看懂了，謝謝

## 心得
* 了解為什麼要用 Base64 文字編碼，有甚麼優缺點，原來 Google 圖片也是用這種方式，來源網站掛了，還是可以看到圖片
* 在只有 Html CSS JavaScript 環境裡是單純的幸福， npm 我不是在抱怨你啦

## reference
* [b64.io 線上將圖片轉Base64文字編碼，讓網頁載入更順暢](https://www.minwt.com/webdesign-dev/html/17754.html)
* [[優化]圖片轉成 Base64 編碼字串，降低連線請求](https://sofree.cc/base64-images/)

## 題目

禿頭俠說，他看了小杰[第 20 關](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/Sk-_oGL2U/https%3A%2F%2Fhackmd.io%2F3cuxdNsWS6qLNh6KqVYVkw%3Fview)程式碼，發現他的字串相加語法可以用 [Template String 樣板字串](https://ithelp.ithome.com.tw/articles/10192949)來改寫。

例如原本寫法是

var people = [
  {
    name: '小明',
    friends: 2
  },
  {
    name: '阿姨',
    friends: 999
  },
  {
    name: '杰倫',
    friends: 0
  }
]

let originString = '我叫做 ' + people[0].name; // 過去的寫法
let originUl = '<ul>\
  <li>我叫做 ' + people[0].name + '</li>\
  <li>我叫做 ' + people[1].name + '</li>\
  <li>我叫做 ' + people[2].name + '</li>\
</ul>'; // 多行的寫法 

用 ES6 寫法可以改為

let ul = `
  <ul>
    <li>我叫做 ${people[0].name}</li>
    <li>我叫做 ${people[1].name}</li>
    <li>我叫做 ${people[2].name}</li>
  </ul>
`

請改寫您[第 20 關](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/Sk-_oGL2U/https%3A%2F%2Fhackmd.io%2F3cuxdNsWS6qLNh6KqVYVkw%3Fview)的字串相加邏輯，以符合 ES6 寫法


## 如果你已經早就會 ES6 字串處理，請觀看以下文章，挑選一個你不會的技術觀念，並分享你學到了什麼

* [邁向 JavaScript 勇者之路](https://ithelp.ithome.com.tw/users/20083608/ironman/1354)
* [重新認識 JavaScript](https://ithelp.ithome.com.tw/users/20065504/ironman/1259)
* [ES6 入門手冊(較於艱深)](https://es6.ruanyifeng.com/)

<div style="display:none">

## 實作

## 觀摩同學

## 心得

## reference

</div>

###### tags: `js學徒特訓班`