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 = "Bill";
let lastName = "Gates";
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 不支持模板字面量。
第一个完全支持模板字面量的浏览器版本是：
Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
2015 年 3 月 2015 年 11 月 2014 年 12 月 2016 年 9 月 2015 年 4 月
完整的字符串参考
如需完整参考，请访问我们的完整 JavaScript 字符串参考手册。
该手册包含所有字符串属性和方法的描述和实例。
页:
[1]