思考——console.log(`${1+2}`)===console.log`${1+2}`?

前言

模板字符串是ES6新增的重要語法功能之一，它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

示例以下。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
複製代碼

可是模板字符串不只擁有上面展現的功能，還擁有一個常被人忽視的功能——標籤模板。

alert`123`
// 等同於
alert(123)
複製代碼

它能夠緊跟在一個函數名後面，該函數將被調用來處理這個模板字符串。

本文將深刻標籤模板，經過實例展現的方式，幫助讀者瞭解這個有趣的功能。

標籤模板

標籤模板其實不是模板，而是函數調用的一種特殊形式。「標籤」指的就是函數，緊跟在後面的模板字符串就是它的參數。

既然標籤模板是函數調用的一種形式，那麼標題中的兩種console.log的輸出內容是否會同樣呢？

console.log(`${1+2}`)
//  3

console.log`${1+2}`
// ["", ""] 3
複製代碼

很顯然，結果並不同，雖然兩種方式都輸出了1+2=3的結果，可是經過標籤模板輸出的內容還多了一個帶有兩個空字符串的數組。

看看下面這個例子。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同於
tag(['Hello ', ' world ', ''], 15, 50);
複製代碼

經過這個例子，咱們能夠看出，若是模板字符裏面有變量，該變量先後的字符串將被分割成獨立的字符串，這些字符串會組成一個數組，成爲該函數的第一個參數，而模板字符的變量則會依次成爲該函數的剩餘參數。

須要提醒的是，若是模板字符裏面的變量先後沒有其餘字符串，也會被分割成獨立的空字符串，放進第一個數組參數中。

實例方法

經過上面的講解，咱們逐漸了標籤模板的功能，下面這個實例方法，將會給你提供一個標籤模板的使用示例。

function Print(arrList,...itemList){
	let items=[...arrList,...itemList];
	for(let item of items){
		console.log(item)
	}
}

Print`hello${1+2}world`

// hello
// world
// 3
複製代碼

總結

以上就是本人對於標籤模板功能的一些思考，若是你有任何看法和想法，歡迎留言。

最後，祝工做順利，生活愉快。