思考——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

总结

以上就是本人对于标签模板功能的一些思考，如果你有任何见解和想法，欢迎留言。

最后，祝工作顺利，生活愉快。