標簽函數的使用場景？

標簽函數的語法是函數名后面直接帶一個模板字符串，并從模板字符串中的插值表達式中獲取參數，舉個例子。

定義一個 greet 函數接收三個參數。

function greet(arg1, arg2, arg3){

console.log(arg1);

console.log(arg2);

console.log(arg3);

}

下面兩句代碼等價

// 普通函數

greet(["I'm ", ". I'm ", " years old."], name, age)

// tag 函數

greet`I'm ${name}. I'm ${age} years old.`、

// 最終輸出

[ 'I\'m ', '. I\'m ', ' years old.' ]

Alfred

47

標簽函數的第一個參數是被嵌入表達式分隔的文本的數組。第二個參數開始是嵌入表達式的內容。

函數返回標簽函數

function cook(strs, ...substs) {

return substs.reduce(

(prev,cur,i) => prev+cur+strs[i+1],

strs[0]

);

}

function repeat(times) {

return function (...args) {

return cook(...args).repeat(times);

};

}

// 運行結果

> repeat(3)`abc`

'abcabcabc'

> repeat(3)`abc${3+1}`

'abc4abc4abc4'

標簽函數返回標簽函數

// 實現一個 three 函數

const three = (...args1) => (...args2) => (...args3) =>

cook(args1) + cook(args2) + cook(args3);

// 我們可以這么調用

> three`hello``world``!`

'helloworld!'

標簽函數有什么用

舉個例子 styled-components ：

styled-components 就是通過 Tag 函數來給 React 和 ReactNative 設置 CSS 樣式。