JavaScript 有趣的冷知識：模板字串

前端小智發表於2022-12-27
JavaScript字串
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

不曉得大家在利用 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 真的太少了。

image.png

Template Strings

在開始講 tagged template literal 時，必須要先講一下 template strings，相信有在使用 ES6 的人都知道 template strings 是非常好用的方法，解決了以往組合字串上需要用冗長的加號不斷的拼接。


// ES5
var myName = '前端小智'
console.log("Hello " + myName + '!')
// 'Hello 前端小智!'

// ES6
const myName = '前端小智'
console.log(`Hello ${myName}`)
// 'Hello 前端小智!'

甚至 template strings 也可以利用 multi-line 的效果進而達到換行的效果。

// ES5
console.log('Hello\n' + '前端小智')
// Hello   
// 前端小智


// Es6
console.log(`
Hello
前端小智
`)
// Hello   
// 前端小智

看到上面的 multi-line 寫法有沒有瞬間覺得跟在寫 styled-components 很像呢

其實 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 可以說是一模一樣。

image.png

在上面的例子可以看到輸出的格式有點奇怪，竟然是個陣列而不是單純的字串而已，這是因為 JavaScript 要把 template string 記錄起來，這樣才能把 template string 中的變數抓出來，畢竟 function call 最重要的就是要把引數傳進去。

知道了該特點後，接下來我們嘗試用這種方式傳引數進去 function 內，就像下面這樣。

image.png

沒想到還是沒辦法把完整的字串顯示出來，其實利用 tagged template literal 的方式進行 function call 時，第一個引數是 template strings 中的 raw strings 也就是除了變數以外的其他字串的集合，會是一個陣列，其餘的引數則是會根據 template strings 中帶入的變數一一的列舉出來。

舉例來說：假如在 template strings 中一共傳入了兩個變數，則這兩個變數都會被當作此 function 中的第二及第三個引數帶入，事例如下。

image.png

但這樣寫真的是很醜，而且你很難預期這個在這個 template strings 中一共會傳多少個變數進去，這時候如果要讓這個 function 寫起來比較好看可以用 ES6 的 rest parameter 的方式，只是會把變數都變成陣列，所以要使用變數時要記得解構出來，事例如下：

image.png

總結

這次介紹了一種不同的 function call 方式，希望大家有所收藏。

我是刷碗智，新的一年，我們一起刷刷刷。

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://medium.com/onedegree-...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章