上查看所有课程
注意: 如果您是 TypeScript 新手，请先查看我们的 TypeScript 入门 教程。
TypeScript 模板字面量是字符串，它允许我们将变量或表达式直接嵌入其中。它们用反引号 `` 包围。
这是一个模板字面量的简单示例。阅读本教程的其余部分以了解更多信息。
示例
let username: string = "Alice";
let greeting = `Hello, ${username}`;
console.log(greeting);
// Output: Hello Alice这里，`Hello ${username}` 是一个模板字面量，我们将 username 变量直接嵌入其中。
示例：TypeScript 模板字面量
通过使用 ${...} 语法，我们可以使用模板字面量嵌入 TypeScript 表达式或变量。例如，
let number1: number = 8;
let number2: number = 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}是嵌入的变量。
注意：TypeScript 中的模板字面量与 JavaScript 中的行为相同。TypeScript 仅添加了适用的类型检查（例如，确保 `${...}` 中的表达式是有效类型）。
为什么使用模板字面量？
模板字面量允许直接包含任何类型的引号。
在模板字面量出现之前，字符串使用单引号（' '）或双引号（" "）。
而且，您在字符串中包含引号时必须小心，以避免错误。例如，您可以
- 混合使用单引号和双引号。
- 使用转义字符。
// Valid codes - mix quotes to avoid errors
let string1: string = 'A "quote" inside a string';
let string2: string = "Another 'quote' inside a string";
console.log(string1);
console.log(string2);
// Invalid codes - cannot use same quotes without escaping
// let string1: string = 'A 'quote' inside a string';
// let string2: string = "Another "quote" inside a string";
// Valid code - using escape characters
let string3: string = 'A \"quote\" inside a string';
let string4: string = "Another \'quote\' inside a string";
console.log(string3);
console.log(string4);使用模板字面量，您可以轻松地在字符串中包含单引号和双引号，而无需转义字符
let string1: string = `This is a string with a 'single quote' in it.`;
let string2: string = `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: string = `123 Main St.
San Francisco, CA
94105`;
console.log(address);输出
123 Main St. San Francisco, CA 94105
带标签的模板
带标签的模板是 TypeScript 中模板字面量的一种高级形式。它们允许您使用函数解析模板字面量。
此外，在将模板字面量传递给函数时，您无需使用括号 ()。例如，
function displayMessage(message: TemplateStringsArray) {
return message;
}
// Create a tagged template
let result = displayMessage`Hello Jack`;
console.log(result); // [ 'Hello Jack' ]在这里，与常规函数参数不同，模板字面量被拆分为一个数组。
在我们的示例中，函数接收了一个包含单个元素（来自模板字面量的字符串）的数组。因此，我们得到的输出是 [ 'Hello Jack' ]。
提示： 尝试将普通字符串作为参数传递给 displayMessage() 函数，并注意语法和输出的差异。
另请阅读