前端必知必会-JavaScript 模板字符串

---

JavaScript 模板字符串

反引号语法

模板字符串使用反引号 (``) 而不是引号 (“”) 来定义字符串：

示例

let text = `Hello World!`;

字符串内的引号

模板字符串允许在字符串内使用单引号和双引号：

示例

let text = `他经常被称为“Johnny”`;

多行字符串

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

示例

let text =
`敏捷的
棕色狐狸
跳过了
懒惰的狗`;

插值

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

该方法称为字符串插值。

语法为：

${...}

变量替换

模板字符串允许在字符串中使用变量：

示例

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 = "模板字符串";
let tags = ["template strings", "javascript", "es6"];

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

html += `</ul>`;

---

总结

本文介绍了JavaScript 模板字符串的使用，如有问题欢迎私信和评论