模板字面量

Posted by CodingWithAlice on August 25, 2019

模板字面量

1.在模板字面量(反引号)之内的所有空白符都是字符串的一部分,因此需要特别留意缩进。    2.在模板字面量中使用 \n 来指示换行的插入位置。 3.模板字面量看上去仅仅是普通JS字符串的升级版,但二者之间真正的区别在于模板字面量的变量占位符

变量占位符允许将任何有效的JS表达式嵌入到模板字面量中,并将其结果输出为字符串的一部分。 变量占位符由起始的 ${ 与结束的 } 来界定,之间允许放入任意的 JS 表达式。

/*之前定义了count=10;price=2.5;*/
`${count} items cost $${(count * price).toFixed(2)}.`//"10 items cost $2.50."

模板字面量本身也是 JS 表达式,因此可以将模板字面量嵌入到另一个模板字面量内部

`Hello, ${my name is ${ name }}.`

4.模板字面量真正的威力来自于标签模板,每个模板标签都可以执行模板字面量上的转换并返回最终的字符串值。标签指的是在模板字面量第一个反引号前方标注的字符串

`let message = tag`Hello world`;` 
function tag(literals, ...substitutions) {  /*返回一个字符串*/ }

标签可以是一个函数,调用时传入加工过的模板字面量各部分数据,但必须结合每个部分来创建结果。

第一个参数是一个数组,包含Javascript解释过后的字面量字符串,它之后的所有参数都是每一个占位符的解释值。标签函数通常使用不定参数特性来定义占位符,从而简化数据处理的过程。

实例解释:

let count = 10,price = 0.25;
let message = passthru`${count} items cost $${(count * price).toFixed(2)}.`;

如果有一个名为passthru()的函数,那么作为一个模板字面量标签,它会接受3个参数: 首先是第一个参数literals数组,包含以下元素:  

​ 1、第一个占位符前的空字符串(“”)  

​ 2、第一、二个占位符之间的字符串(“ items cost $”)  

​ 3、第二个占位符后的字符串(“.”);

下一个参数是变量count的解释值,传参为10,它也成为了substitutions数组里的第一个元素;

最后一个参数(count*price).toFixed(2)的解释值,传参为2.50,它是substitutions数组里的第二个元素。

注意:literals里的第一个元素是一个空字符串,这确保了literals[0]总是字符串的始端,就像literals[literals.length-1]总是字符串的结尾一样。substitutions的数量总比literals少一个,这也意味着表达式substitutions.Iength === literals.Iength-1的结果总为true。