前言
今天來學習 Tagged templates
在找資料的時候發現有兩種 templates
- Tagged templates
- Tagged template literal
This unusual backtick syntax is a new JavaScript feature called a tagged template literal.
Template Strings
在ES6以前 ,組合字串上需要用冗長的加號不斷的拼湊。
1 | var name ='Cody' |
甚至 template strings 也可以利用 multi-line 的效果進而達到換行的效果。
1 | //ES6以前 |
這樣清楚了嗎~
Tagged Template Literal
簡單來說 就是另一種函数调用的一种特殊形式
直接舉個例子
1 | function foo(a, b, c,) { |
這樣的寫法 不太好理解
可以改成ES6 rest_parameters的寫法
把變數都變成陣列,所以要使用變數時要記得解構出來,整體寫法範例如下:
1 | function foo(a, ...b) { |
講那麼多 ,來點實際的案例會比較清楚
實際案例
一開始並不會覺得厲害之處,平時工作中也不會用到,但是這些知識是有用的,在很多場景中會用到它。
react的styled-components
可以直接生成組件,動態生成樣式
1 | const Button = styled.button` |
多語言轉化(國際化處理)
1 | i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!` |
動態處理函數裡面內容的轉換
1 | const data = { |
誠摯邀請鄧鐵先生作為選手於2021年12月28日參加上海張江杯垂釣競技大賽。
主辦方:上海市浦東釣魚協會
以上都清楚了嗎
不清楚沒關係
我是很清楚了拉~