在 JavaScript 中，模板字面量是在 ES6 中引入的，用于动态地定制字符串。模板字面量允许你在字符串中加入变量或表达式，并且根据变量和表达式的值变化，字符串也会相应地改变。
模板字面量有多种同义词，例如模板字符串、字符串模板、反引号语法等。
语法
遵循以下语法来在 JavaScript 中使用模板字面量：
let str = `Hi ${name}`;
你需要在反引号（``）之间写一个字符串。对于需要与字符串一起使用的动态变量或表达式，你需要将其放在 ${} 中。
此外，使用模板字面量时，不需要转义字符即可在字符串中添加单引号或双引号。
示例
示例：使用模板字面量创建字符串
在下面的示例中，我们使用模板字面量创建了一个包含特殊字符的字符串。
str1 字符串与我们使用单引号或双引号创建的普通字符串相同。str2 字符串包含了一个单引号。这里，你可以看到我们并没有使用转义字符来在字符串中添加单引号。
<html>
<body>
<div id="output1"> </div>
<div id="output2"> </div>
<script>
let str1 = `Hello Users!`;
let str2 = `'Tutorialspoint' is a good website`;
document.getElementById("output1").innerHTML = str1;
document.getElementById("output2").innerHTML = str2;
</script>
</body>
</html>
输出：
Hello Users!
'Tutorialspoint' is a good website
示例：模板字面量中的变量
下面的代码演示了如何通过将变量传递给模板字面量字符串来在字符串中使用动态值。
在这里，我们定义了与汽车相关的变量。之后，我们使用模板字面量创建了一个字符串并添加了这些变量。
在输出中，你可以看到变量在字符串中被它们各自的值替换。
<html>
<body>
<p id="output"> </p>
<script>
let car = "BMW";
let model = "X5";
const price = 5000000;
const carStr = `The price of the ${car} ${model} is ${price}.`;
document.getElementById("output").innerHTML = carStr;
</script>
</body>
</html>
输出：
The price of the BMW X5 is 5000000.
示例：模板字面量中的表达式
你还可以使用模板字面量将表达式添加到字符串中。
在 str1 字符串中，我们在模板字面量字符串中添加了一个表达式来计算两个数的和。
在 str2 中，我们将函数调用作为一个表达式。它用从函数返回的值替换了表达式。
<html>
<body>
<div id="output1"> </div>
<div id="output2"> </div>
<script>
function func() {
return 10;
}
const str1 = `The sum of 2 and 3 is ${2 + 3}.`;
const str2 = `The return value from the function is ${func()}`;
document.getElementById("output1").innerHTML = str1;
document.getElementById("output2").innerHTML = str2;
</script>
</body>
</html>
输出：
The sum of 2 and 3 is 5.
The return value from the function is 10
JavaScript 中嵌套的模板字面量
JavaScript 允许你在其他模板字面量内部使用模板字面量，这就是所谓的嵌套模板字面量。
示例
在下面的示例中，我们在外部模板字面量中添加了一个表达式。该表达式包含了一个三元运算符。它检查 2 是否小于 3。根据返回的布尔值，它执行第一个或第二个嵌套表达式并打印结果。
<html>
<head>
<title>Nested Template Literals</title>
</head>
<body>
<p id="output"> </p>
<script>
const nested = `The subtraction result is: ${2 < 3 ? `${3 - 2}` : `${2 - 3}`}`;
document.getElementById("output").innerHTML = nested;
</script>
</body>
</html>
输出：
The subtraction result is: 1
示例：使用模板字面量定义多行字符串
你还可以使用模板字面量来定义多行字符串。
<html>
<body>
<div id="output"> </div>
<script>
function func() {
return 10;
}
const str1 = `The sum of 2 and 3 is ${2 + 3}. <br>
The return value from the function is ${func()}`;
document.getElementById("output").innerHTML = str1;
</script>
</body>
</html>
输出：
The sum of 2 and 3 is 5.
The return value from the function is 10