JavaScript模板字面量（Template literals）介绍

学习&实践爱好者

已于 2022-09-14 14:54:11 修改

阅读量927

点赞数 2

分类专栏： JavaScrip技术文章标签： javascript

于 2022-09-12 15:40:51 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/126818098

版权

JavaScrip技术专栏收录该内容

129 篇文章 24 订阅

订阅专栏

JavaScript模板字面量（Template literals）介绍

模板字面量（Template literals）是什么？

简单地说，是允许嵌入表达式的字符串字面量。在反引号中可以直接使用单引号和双引号。

模板字符串使用反引号 (`) 来代替普通字符串中的用双引号和单引号。

模板字符串 - JavaScript | MDN

基本语法结构是：`string ${expression} string`

ECMAScript 6（简写ES6）模板字面量（Template Literal）是一种能够嵌入表达式的格式化字符串，有别于普通字符串，它使用反引号（`）包裹字符序列，而不是双引号或单引号。模板字面量包含特定形式的占位符（${expression}），由美元符号、大括号以及合法的表达式组成，合法的表达式（expression）可以是变量、算术或函数调用，甚至还可以是模板字面量。在ES6引入模板字面量后，就能避免用若干个加号来实现字符串拼接，而改用更为优雅的语法来替代，下面用新旧两种方式分别来组合字符串。

let name = "李明", age = 18;

console.log( "我是\"" + name + "\"，我的年龄是" + age + "。"); //传统拼接方式

console.log( `我是 "${name}"，我的年龄是${age}。`); //模板字面量方式

无论是代码可读性还是简洁性，新方式都要略胜一筹。都输出：我是 "李明"，我的年龄是18。

因为旧方式中的普通字符串是用双引号包裹的，所以字符序列中的双引号要用反斜线（\）转义。而模板字面量则无需为双引号或单引号转义，当然，如果出现反引号，那么还需将其转义。

嵌套使用

let a = 1, b = 2;

let str = `${ a } plus ${ b } ${`equals to ${ a + b }`}`;

console.log(str); // 1 plus 2 equals to 3

下面给出在网页中模板字面量的例子。

例1、

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width" />
<title>模板字面量演示之一</title>
</head>
<body>
<div id="s1"></div>
<div id="s2"></div>
<div id="str1"></div>
<div id="str2"></div>
<script>
let name = "李明", age = 18;
//传统拼接方式如下
document.getElementById('s1').innerHTML = '我是' + name + '，我的年龄是' + age + '。';
//模板字面量方式如下
document.getElementById('s2').innerHTML = `我是${name}，我的年龄是${age}。`;
//传统拼接方式且包含标签情况如下，
document.getElementById('str1').innerHTML = '我是<b>' + name + '</b>，我的年龄是<font color="green">' + age + '</font>。';
//模板字面量方式且包含标签情况如下
document.getElementById('str2').innerHTML = `我是<b>${name}</b>，我的年龄是<font color="green">${age}</font>。`;
</script>
</body>
</html>

保存文件名为：模板字面量示例1.html，用浏览器打开，效果如下：

例2、

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width" />
<title>模板字面量演示之二</title>
</head>
<body>
<div id="string"></div>
<script>
let a = 1, b = 2;
let str = `${ a } plus ${ b } ${`equals to ${ a + b }`}`;
document.getElementById('string').innerHTML = str;
</script>
</body>
</html>

保存文件名为：模板字面量示例1.html，用浏览器打开，效果如下：