模板文字和标记模板文字之间的差异

Question

es6具有两种新类型的文字：

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

模板文字：支持插值的多行字符串文字。

eg：

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

标记的模板文字：是通过模板文字提供参数的函数调用。

eg：

String.raw`Hello ${firstName}! How are you today?

这两个文字有什么区别？以及何时使用标记的模板文字？

Answer 1

使用标记的模板文字，我们能够使用函数修改模板文字的输出。第一个参数包含一系列字符串文字。第二个和第一个论点是处理后表达式的值。我们可以使用我们功能的任何名称。

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

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

Answer 2

es6具有新功能

模板文字

和

标记的模板文字（标记模板）

这使使用字符串的工作更加容易。您将文字包裹在``backticks'

中

我们可以：

1.间接变量

let foo = "abc";
console.log(`Welcome ${foo}`);  // Welcome abc

2.中间任何类型的表达式

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

3. declare strings cant and＆quot;报价不必逃脱任何东西。

let foo = `foo is 'bar', "bar" is foo`
console.log(foo); // "foo is 'bar', "bar" is foo"

4.多行字符串的清洁器语法

let text = `foo is bar
bar is foo`  
console.log(text);
//"foo is bar
//bar is foo"

5.打击模板，我们可以将模板文字传递到函数，这是：

let person = 'Mike';
let age = 28;
let output = myTag `that ${ person } is ${ age }`;
function myTag(strings, personExp, ageExp) {
//strings[0] gets value "that "
//strings[1] gets value " is "
//personExp  gets value " Mike "
//ageStr     gets value "28"
return strings[0] + personExp + strings[1] + ageExp;
}
console.log(output);
// that Mike is 28

6.String.raw，我们可以获得原始形式，以下是：

let text = String.raw `The "n" newline won't result in a new line.'
console.log(text);
// The "n" newline won't result in a new line.