0%

每天一點點,學習ES6(三) Tagged templates

前言

今天來學習 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
2
3
4
5
6
7
8
var name ='Cody'
var age =18

//ES6以前
console.log("Hi 我是"+name +",今年"+age+"歲") //Hi 我是 Cody,今年18歲
//ES6
console.log(`Hi 我是${name} ,今年${age}歲`) //Hi 我是 Cody,今年18歲

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

1
2
3
4
5
6
7
8
9
10
//ES6以前
console.log("Hi 我是"+name +",\n今年"+age+"歲")
//Hi 我是 Cody,
//今年18歲

//ES6
console.log(`Hi 我是${name} ,
今年${age}歲`)
//Hi 我是 Cody,
//今年18歲

這樣清楚了嗎~
茅塞頓開

Tagged Template Literal

簡單來說 就是另一種函数调用的一种特殊形式

直接舉個例子

1
2
3
4
5
6
7
8
9
10
11
12
13
function foo(a, b, c,) {
console.log(a, b, c)
}

//這是一般函數的調用
foo("Hello", "World") //Hello World undefined

//Tagged Template Literal
const name = "why"
const age = 18
// ['Hello', 'Wo', 'rld']
foo`Hello${name}Wo${age}rld`//(3)['Hello','Wo','rld',row:Array(3)] 'Cody' 18

這樣的寫法 不太好理解
可以改成ES6 rest_parameters的寫法
把變數都變成陣列,所以要使用變數時要記得解構出來,整體寫法範例如下:

1
2
3
4
5
6
7
8
9
10
function foo(a, ...b) {
console.log(a)
console.log(b)
}
foo`Hello${name}Wo${age}rld`

//(3)['Hello','Wo','rld',row:Array(3)]
//(2) ['Cody', 18]


講那麼多 ,來點實際的案例會比較清楚

OK

實際案例

一開始並不會覺得厲害之處,平時工作中也不會用到,但是這些知識是有用的,在很多場景中會用到它。

react的styled-components

可以直接生成組件,動態生成樣式

1
2
3
4
5
6
7
8
9
10
const Button = styled.button`
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;

多語言轉化(國際化處理)

1
2
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "歡迎訪問XXX,您是第XXXX位訪問者!"

動態處理函數裡面內容的轉換

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const data = {
"name": "鄭鐵",
"sex": 0,
"role": 1,
"time": 1640678098887
}
const invite = function (arrs, nameExp, sexExp, roleExp, timeExp) {
let strName = nameExp;
// 性別處理
let strSex = ['先生', '女士'][sexExp];
// 角色處理
const role = {
"1": "選手",
"2": "裁判",
"3": "計分員",
"4": "攝影師"
};
let strRole = role[roleExp];
// 日期處理
let strTime = new Date(timeExp).toLocaleDateString(undefined, {
year: 'numeric',
month: 'long',
day: 'numeric'
});

// 輸出內容
let output = [arrs[0]];

[strName, strSex, strRole, strTime].forEach((str, index) => {
output.push(str, arrs[index + 1] || '');
});

return output.join('');
};

let content = invite`誠摯邀請${data.name}${data.sex}作為${data.role}${data.time}参加上海張江杯垂釣競技大賽。
主辦方:上海市浦東釣魚協會`;

console.log(content);

誠摯邀請鄧鐵先生作為選手於2021年12月28日參加上海張江杯垂釣競技大賽。
主辦方:上海市浦東釣魚協會

以上都清楚了嗎

不清楚沒關係

我是很清楚了拉~

生氣


References

你的支持是我活力的來源 :)