JavaScript 模板文本

同义词：

• 模板文字
• 模板字符串
• 字符串模板
• Back-Tics 语法

Back-Tics 语法

模板文字使用反引号 （‘’） 而不是引号 （“”） 来定义字符串：

let text = `Hello World!`;

尝试一下 »

---

字符串内的引号

使用模板文字，可以在字符串中同时使用单引号和双引号：

let text = `He's often called "Johnny"`;

尝试一下 »

---

多行字符串

模板文字允许多行字符串：

let text =  
`The quick  
brown fox  
jumps over  
the lazy dog`;  

尝试一下 »

---

插值

模板文本提供了一种将变量和表达式插值到字符串中的简单方法。

该方法称为字符串插值。

语法为：

${...}

---

变量替换

模板文字允许字符串中的变量：

let firstName = "John";  
let lastName = "Doe";  

let text = `Welcome ${firstName}, ${lastName}!`;

尝试一下 »

自动将变量替换为实数称为字符串插值。

---

表达式替换

模板文字允许在字符串中使用表达式：

let price = 10;  
let VAT = 0.25;  

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

尝试一下 »

用实数自动替换表达式称为字符串插值。

---

HTML 模板

let header = "Templates Literals";  
let tags = ["template literals", "javascript", "es6"];  

let html = `<h2>${header}</h2><ul>`;  
for (const x of tags) {  
  html += `<li>${x}</li>`;  
}  

html += `</ul>`;

尝试一下 »

---

浏览器支持

Template Literals是 [ES6 的一个特性]（JavaScript 2015）。

所有现代浏览器都支持它：

Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

Template Literals在 Internet Explorer 中不受支持。