模板文字和标签模板文字之间的区别?

Muk*_*mar 3 javascript ecmascript-6

ES6有两种新的文字:

  • 模板文字
  • 标记的模板文字.

模板文字:支持插值的多行字符串文字.

例如:

const firstName = 'Jane';
console.log(`Hello ${firstName}! How are you today?`);
Run Code Online (Sandbox Code Playgroud)

标记模板文字:是函数调用,其参数通过模板文字提供.

例如:

String.raw`Hello ${firstName}! How are you today?
Run Code Online (Sandbox Code Playgroud)

这两个文字之间有什么区别?何时使用标记模板文字?

Pan*_*ool 7

使用标记模板文字,我们可以使用函数修改模板文字的输出.第一个参数包含一个字符串文字数组.第二个,以及第一个之后的每个参数,是已处理的替换表达式的值.我们可以在函数中使用任何名称.

var a = 1;
var b = 2;

function tag(strings, ...values) {
 console.log(strings[0]); // "One "
 console.log(strings[1]); // " Two"
 console.log(strings[2]); // " Three"
 console.log(values[0]); // 1
 console.log(values[1]); // 2
}

tag`One ${ a } Two ${ b } Three`;

// One 
// Two 
// Three
// 1
// 2
Run Code Online (Sandbox Code Playgroud)

这里我们的标签功能将返回自定义格式的输出

  • *"第一个参数包含一个字符串文字数组"*nitpick:它包含一个字符串*值*的数组.文字是一种语法结构,只对解析器有意义.解释器从它们创建字符串值. (5认同)