# ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example? [SOL]
## 樣板字面值/字串樣板（Template literals）

ES6 引入了 Template Literals (字串樣版) 是增強版的字串表示法，Template Literals 讓你可以寫多行字串 (multi-line strings)、也可以在字串中插入變數或 JavaScript 表達式 (String/Expression interpolation)。

Template Literals 的語法是用兩個反引號 ``(back-tick) 標示，而在字串中可以使用 ${ } 語法來嵌入變數或 JavaScript 表達式。

### 當你要在字串樣板中使用"or`，可以用\反斜線去跳過

過去：

'妳好\'威' //'妳好'威'

現在：

`妳好\`威` //"妳好`威"

### 多行字串
輸出結果：
string text line 1
string text line 2
過去：

console.log('string text line 1\n' +
'string text line 2');

==Template Literals:==

console.log(`string text line 1
string text line 2`);

### 嵌入變數或任何表達式 String/Expression Interpolation
輸出結果：
Fifteen is 15 and
not 20.
過去：

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

==Template Literals:== 讓語法更具可讀性：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

### 巢狀樣板

過去ES5：要一次加字串相加

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

==ES2015 Template Literals:== without nesting

const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

==ES2015 Template Literals:== with nested template literals

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

### 樣板標籤/標籤模版/標籤樣板字面值 Tagged Template Literals/Tagged templates
#### 模版字符串的進階用法
Styled Component：
直接在模板字串之前使用函數，並且不需使用「括號()」。
這是怎麼做到的？
MDN 的定義：
> 標籤樣板字面值是一種更高級的樣板字面值形式，允許你透過標籤函數操作樣板字面值的輸出。
標籤函數的第一個參數是一「字串陣列」，其餘參數則是「處理過的表達式」。最終，你可以返回一個經處理後的字串，甚至是完全不一樣的東西。
標籤函數的名稱可以是任何你想要的。

tagged template literal 簡單來說就是讓你可以用另一種方式進行 function call，通常我們認知的 function call 都是利用小括號的方式進行，並且在小括號中傳入要讓此 function 使用的參數，但 tagged template literal 可以讓你利用 template 的技巧進行 function call,這個funciton叫做標籤函數 ( tag function)。
`alert`123`;`

如果字串中沒有使用 ${} 就跟執行一般函數類似，執行函數時，會傳入一個陣列型態的參數，陣列中只有一個元素就是字串本身：

const taggedTemplate = function (ary, ...rest) {
  console.log(ary, ...rest);
};
taggedTemplate`hihihi 123 467`;
taggedTemplate("hihihi 123 467");

如果字串中有使用 ${}，會將字串樣版的內容切分成多個參數，切法是先根據 ${} 的位置，將沒有在 ${} 中的內容切開成多個字串組成一個陣列 (array)，當作函數的第一個參數，接著將每個 ${} 中的值，依序當作第二個、第三個、...第 N 個參數：

const taggedTemplate = function (ary, ...rest) {
  console.log(ary, ...rest);
};
const a = 100;
const b = 200;
taggedTemplate`hihihi${a}cool${b}.`;


參考連結：
[Template literals (Template strings)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
[JavaScript 有趣的冷知識：tagged template literals](https://medium.com/onedegree-tech-blog/javascript-%E6%9C%89%E8%B6%A3%E7%9A%84%E5%86%B7%E7%9F%A5%E8%AD%98-tagged-template-literals-5ca9db71f066)
[[筆記] JavaScript ES6 中的模版字符串（template literals）和標籤模版（tagged template）](https://pjchender.blogspot.com/2017/01/javascript-es6-template-literalstagged.html)
[[Javascript] ES6 模板字串 (Template String)知多少](https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/javascript-es6-%E6%A8%A1%E6%9D%BF%E5%AD%97%E4%B8%B2-template-string-%E7%9F%A5%E5%A4%9A%E5%B0%91-7f2b1d67812e)
[JavaScript ES6 Template Literals 字串樣版](https://www.fooish.com/javascript/ES6/template-literals.html)