每天一點點，學習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以前，組合字串上需要用冗長的加號不斷的拼湊。

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 的效果進而達到換行的效果。

//ES6以前
console.log("Hi 我是"+name +",\n今年"+age+"歲")  
//Hi 我是 Cody,
//今年18歲 

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

這樣清楚了嗎~

Tagged Template Literal

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

直接舉個例子

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的寫法
把變數都變成陣列，所以要使用變數時要記得解構出來，整體寫法範例如下：

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]

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

實際案例

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

react的styled-components

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

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位訪問者！"

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

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日參加上海張江杯垂釣競技大賽。
主辦方：上海市浦東釣魚協會

以上都清楚了嗎

不清楚沒關係

我是很清楚了拉~

Cody Di Da Di