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 特性。
自 2017 年 6 月起,所有现代浏览器均已完全支持 ES6。
| Chrome 51 |
Edge 15 |
Firefox 54 |
Safari 10 |
Opera 38 |
| 2016年5月 | 2017年4月 | 2017年6月 | 2016年9月 | 2016年6月 |
