在此ES6 JavaScript教程中，我们将学习模板文字(模板字符串)。

什么是模板文字？

模板文字是字符串文字，可让我们嵌入表达式，多行字符串和字符串插值。

模板文字使用反引号而不是单引号和双引号引起来。

让我们使用单引号和双引号打印字符串Hello World。

console.log('Hello World');
console.log("Hello World");

现在，让我们使用模板文字打印相同的字符串。

console.log(`Hello World`);

将表达式嵌入模板文字中

我们可以使用美元符号和大括号将表达式嵌入，例如以下的" ${expression}"。

在以下示例中，我们将打印字符串" Sum 2 + 3 = 5"。

console.log("Sum 2 + 3 = " + (2 + 3));

上面的代码将打印以下输出。

Sum 2 + 3 = 5

在以下示例中，我们使用模板文字打印相同的字符串。

console.log(`Sum 2 + 3 = ${2 + 3}`);

在上面的代码中，对表达式${2 + 3}进行求值，并将其替换为结果5。

模板文字中的变量

在下面的示例中，我们使用变量来打印结果。

var result = 2 + 3;
console.log('Sum 2 + 3 = ' + result);

可以使用以下模板文字来重构以上代码。

let result = 2 + 3;
console.log(`Sum 2 + 3 = ${result}`);

要了解有关let关键字的更多信息，请查看ES6-var let const教程。

模板文字中的函数调用

我们甚至可以在模板文字中调用函数，例如${functionName()}。
在下面的示例中，我们使用模板文字来调用函数。

function add(x, y) {
  return x + y;
}

console.log(`Sum 2 + 3 = ${add(2, 3)}`);

在上面的代码中，表达式${add(2，3)}被求值。
因此，它使用两个参数2和3调用add函数。
add函数然后返回总和5。
因此，将表达式替换为5，然后得到以下输出。

Sum 2 + 3 = 5

多行字符串

要打印多行，我们可以执行以下操作。

var str = "This is the first line.\n" +
"This is the 2nd line.";

console.log(str);

上面的代码将打印以下输出。

This is the first line.
This is the 2nd line.

可以使用模板文字重构相同的代码以打印多行。

const str = `This is the first line.
This is the 2nd line.`;

console.log(str);