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 中不受支持。
