JavaScript 模板字符串
字符串模板
模板字符串
模板字面量
心爱的孩子有很多名字
反引号语法
模板字符串 使用反引号 (``) 而非引号 ("") 来定义字符串
字符串中的引号
模板字符串 允许在字符串中包含单引号和双引号
多行字符串
模板字符串 支持多行字符串
插值
模板字符串 提供了一种将变量和表达式轻松插入字符串的便捷方法。
这种方法称为字符串插值。
语法是
${...}
变量替换
模板字符串 允许在字符串中使用变量
示例
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
将变量自动替换为实际值称为字符串插值。
表达式替换
模板字符串 允许在字符串中使用表达式
将表达式自动替换为实际值称为字符串插值。
HTML 模板
示例
let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
浏览器支持
模板字符串 是一个 ES6 特性 (JavaScript 2015)。
自 2017 年 6 月起，所有现代浏览器都完全支持 ES6
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
模板字符串 不支持 Internet Explorer。
