上查看所有课程
JavaScript 模板字面量是 字符串，允许我们将变量或表达式直接嵌入其中。它们用反引号 `` 括起来。
这是一个简单的模板字面量示例。阅读本教程的其余部分以了解更多信息。
示例
let name = "Alice";
let greeting = `Hello ${name}`;
console.log(greeting);
// Output: Hello Alice在这里，`Hello ${name}` 是一个模板字面量，我们将 name 变量直接嵌入其中。
示例：JavaScript 模板字面量
我们可以使用模板字面量，借助 ${...} 语法来嵌入 JavaScript 表达式或变量。例如，
let number1 = 8;
let number2 = 3;
// embed expression within template literal
let result = `The sum of ${number1} and ${number2} is ${number1 + number2}.`;
console.log(result);
// Output: The sum of 8 and 3 is 11.在上面的示例中，以下代码是模板字面量
`The sum of ${number1} and ${number2} is ${number1 + number2}.`在此模板字面量中，
${number1 + number2}是嵌入的表达式。${number1}和${number2}是嵌入的变量。
注意事项
- 在 JavaScript ES6 中引入模板字面量之前，我们会使用
+运算符来连接字符串中的变量和表达式。 - 某些浏览器可能不支持模板字面量的使用。如需了解更多信息，请访问 JavaScript 模板字面量 支持。
模板字面量允许直接包含任何类型的引号。
在 JavaScript 引入模板字面量之前，字符串通常使用单引号 (' ') 或双引号 (" ")。
并且，您必须小心在字符串中包含引号，以避免错误。例如，您可以
- 混合使用单引号和双引号。
- 使用转义字符。
// valid codes
// mix quotes to avoid errors
let string1 = 'A "quote" inside a string';
let string2 = "Another 'quote' inside a string";
// invalid codes
// cannot use same quotes
string1 = 'A 'quote' inside a string';
string2 = "Another "quote" inside a string";
// valid code after using escape characters
string1 = 'A \"quote\" inside a string';
string2 = "Another \'quote\' inside a string"; 使用模板字面量，您可以轻松地在字符串中包含单引号和双引号，而无需转义字符
let string1 = `This is a string with a 'single quote' in it.`;
let string2 = `This is a string with a "double quote" in it.`;
console.log(string1);
console.log(string2);输出
This is a string with a 'single quote' in it. This is a string with a "double quote" in it.
使用模板字面量创建多行字符串。
模板字面量还使得编写多行字符串变得容易。例如，
// multiline strings using template literals
let address = `123 Main St.
San Francisco, CA
94105`;
console.log(address);输出
123 Main St. San Francisco, CA 94105
标签模板
标签模板是 JavaScript 中模板字面量的一种高级形式。它们允许您使用函数解析模板字面量。
此外，在将模板字面量传递给函数时，您无需使用括号 ()。例如，
function displayMessage(message) {
return message;
}
// create a tagged template
let result = displayMessage`Hello Jack`;
console.log(result); // [ 'Hello Jack' ]在这里，与常规函数参数不同，模板字面量被拆分为一个数组。
在我们的示例中，该函数接收了一个包含单个元素（来自模板字面量的字符串）的数组。因此，我们得到了 [ 'Hello Jack' ] 作为输出。
提示：尝试将常规字符串作为参数传递给 displayMessage() 函数，并注意语法和输出的区别。