模板字面量和标记模板字面量之间的区别是什么？

Question

ES6有两种新的字面量：

• 模板字面量
• 标记模板字面量。

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

例如：

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

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

例如：

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

这两个字面量之间有什么区别？何时使用标记模板字面量？

- Mukund Kumar

---

你是在特别询问 String.raw 还是一般的标记模板字面量？ - Felix Kling

@FelixKling 我在询问标记模板字面量。 - Mukund Kumar

ES6标记模板的实际可用性是否回答了您的问题？模板文字和标记模板文字之间的区别在于，后者允许您对模板文字应用自定义逻辑（而不是默认的字符串连接）。 - Felix Kling

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

这里我们的标签函数将返回具有自定义格式的输出

- Pandiyan Cool

---

第一个参数包含一个字符串值的数组。注：它包含一个字符串“值”。字面量是一个语法结构，只对解析器有意义。解释器会从中创建字符串值。 - Felix Kling

Answer 2

ES6有一些新功能。

模板字面量

以及

标记模板字面量（标记模板）

这使得处理字符串更加容易。你可以用`反引号`包裹你的文本。

通过这个，我们可以：

1. 插入变量

let foo = "abc";

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

2. 插值任何类型的表达式

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

3. 使用单引号和双引号声明字符串，无需转义任何内容。

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.

- Manishz90