前言
模板字符串是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
总结
以上就是本人对于标签模板功能的一些思考,如果你有任何见解和想法,欢迎留言。
最后,祝工作顺利,生活愉快。