JavaScript 字符串模板

• JavaScript 字符串搜索
• JavaScript 数字

同义词：

• Template Literals
• Template Strings
• String Templates
• 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`;

亲自试一试

插值

模板字面量提供了一种将变量和表达式插入字符串的简单方法。

该方法称为字符串插值（string interpolation）。

语法

${...}

变量替换

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

实例

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>`;

亲自试一试

浏览器支持

Internet Explorer 不支持模板字面量。

第一个完全支持模板字面量的浏览器版本是：

完整的字符串参考

如需完整参考，请访问我们的完整 JavaScript 字符串参考手册。

该手册包含所有字符串属性和方法的描述和实例。

• JavaScript 字符串搜索
• JavaScript 数字