开发教程

HTML/CSS 前端脚本服务器脚本编程 XML 网站建设参考手册

课程目录

JS 教程

JS 版本

JS 对象

JS 函数

JS 类

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs jQuery

JS 实例

JS 参考手册

建站手册

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 字符串参考手册。

该手册包含所有字符串属性和方法的描述和实例。

实用工具热门城市五险一金社保查询医保查询养老保险公积金查询社保机构缴费基数信用卡申请