JavaScript 有趣的冷知識：tagged template literals
前言
不曉得大家在利用 React.js 開發網頁的時候有沒有用過一個很好用的套件叫 styled-components，styled-components 是一個用來產生元素樣式的套件，讓你可以在 JSX 中撰寫 css 達到 CSS-IN-JS 的技巧，講了這麼多就是因為 styled-component 的官方文件有說了這句話：
This unusual backtick syntax is a new JavaScript feature called a tagged template literal.
這個 tagged template literal 讓我太好奇了，因為之前在使用 styled-components 的時候有發現明明要產生元素的 method 都是 function，可是在 styled-compoents 中卻看不到任何 "平常" 會使用的 call function 技巧，後來仔細去看了 MDN 才知道原來這個是 ES6 新進的方法，而筆者我直到現在才知道，只能說自己認識的 ES6 真的太少了XD
Template Strings
在開始講 tagged template literal 時，必須要先講一下 template strings，相信有在使用 ES6 的人都知道 template strings 是非常好用的方法，解決了以往組合字串上需要用冗長的加號不斷的拼湊。
甚至 template strings 也可以利用 multi-line 的效果進而達到換行的效果。
看到上面的 multi-line 寫法有沒有瞬間覺得跟在寫 styled-components 很像呢XD
其實 template strings 的寫法跟接下來要講的 tagged template literal 可以說是息息相關，這也是為甚麼要前必須要先提到 tagged template literal 的原因。
Tagged Template Literal
tagged template literal 簡單來說就是讓你可以用另一種方式進行 function call，通常我們認知的 function call 都是利用小括號的方式進行，並且在小括號中傳入要讓此 function 使用的參數，但 tagged template literal 可以讓你利用 template 的技巧進行 function call，寫法就跟上面介紹的 template strings 可以說是一模一樣。
在上面的例子可以看到輸出的格式有點奇怪，竟然是個陣列而不是單純的字串而已，這是因為 JavaScript 要把 template string 紀錄起來，這樣才能把 template string 中的變數抓出來，畢竟 function call 最重要的就是要把參數傳進去。
有了上面的觀念後，接下來就會很開心地嘗試用這種方式傳參數進去 function 內，就像下面這樣。
沒想到還是沒辦法把完整的字串顯示出來，其實利用 tagged template literal 的方式進行 function call 時，第一個參數是 template strings 中的 raw strings 也就是除了變數以外的其他字串的集合，會是一個陣列，其餘的參數則是會根據 template strings 中帶入的變數一一的列舉出來。
舉例來說：假如在 template strings 中一共傳入了兩個變數，則這兩個變數都會被當作此 function 中的第二及第三個參數帶入，範例如下。
但這樣寫真的是很醜，而且你很難預期這個在這個 template strings 中一共會傳多少個變數進去，這時候如果要讓這個 function 寫起來比較好看可以用 ES6 的 rest parameter 的方式，只是會把變數都變成陣列，所以要使用變數時要記得解構出來，整體寫法範例如下：
小結
這次介紹了一種不同的 function call 方式，希望大家可以更加瞭解 JavaScript 神奇之處，但也不要為了貫徹 ninja code 的初衷而把所有的 function call 都利用 tagged template literal 的方式進行呼叫喔XD
有什麼問題都歡迎留言給筆者，筆者也會再去多挖一些有趣的 JavaScript 小知識介紹給大家XD
