JavaScript 模板字符串

JavaScript 模板字符串简介

在 JavaScript 中，字符串可以使用单引号或双引号来表示。而对于模板字符串来说，它是用反引号（`）来表示。其中，对于反引号（`），我们可以在键盘的左上角可以找到。

模板字符串没有大家想象中那么复杂，它本质上也是字符串来的。小伙伴们可以把它看成是一种 “增强版的字符串”，因为它比普通字符串功能更加强大。在实际开发中，模板字符串主要有以下 2 大作用。

多行字符串
字符串拼接

1. 多行字符串

在 ES6 之前，如果想要定义一个多行字符串，我们往往会采用这样的方式：在字符串每一行的最后加上一个 “反斜杠（\）”。

示例 1：使用传统方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const strHtml = "<ul>\
            <li>HTML</li>\
            <li>CSS</li>\
            <li>JavaScript</li>\
        </ul>";
        document.body.innerHTML = strHtml;
    </script>
</body>
</html>

页面效果如下图所示。

使用传统方式来实现多行字符串

分析：

在这个例子中，strHtml 是一个多行字符串，如果我们没有在每一行的最后加上 “\”，那么程序就会报错的。

每一行都要加上 “\”，这种方式比较繁琐，那么有没有更加简单的方式呢？这个时候就可以使用模板字符串来实现了。

示例 2：使用模板字符串

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const strHtml = `<ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>`;
        document.body.innerHTML = strHtml;
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript 模板字符串示例

分析：

模板字符串这种方式非常简单，我们只需要使用 “反引号” 来替代原来的 “单引号或双引号” 就可以了。

2. 字符串拼接

在 JavaScript 中，模板字符串有一个极其强大的功能，那就是在字符串中嵌入变量（也叫做 “插值”），从而实现更简单直观的 “字符串拼接”。

对于字符串拼接来说，传统的方式都是使用 “+” 来实现，我们先来看一个例子。

示例 3：使用 “+” 拼接字符串

运行代码

const user = "Jack";
const website = "绿叶网";
const result = "欢迎" + user + "来到" + website;
console.log(result);

运行结果如下。

欢迎Jack来到绿叶网

分析：

使用 “+” 来拼接字符串，这种方式比较繁琐，也并不直观。在实际开发中，我们更推荐使用 JavaScript 的模板字符串来实现字符串拼接，这也是一个最佳实践。

示例 4：使用模板字符串

运行代码

const user = "Jack";
const website = "绿叶网";
const result = `欢迎${user}来到${website} `;
console.log(result);

运行结果如下。

欢迎Jack来到绿叶网

分析：

首先我们应该清楚一点，凡是使用反引号括起来的字符串，就叫模板字符串。对的，模板字符串的概念就这么简单。

然后如果想要往模板字符串插入一个变量，从而实现字符串拼接功能，此时我们可以使用 “${}” 来把这个变量包裹起来。需要注意的是，“${}” 和模板字符串是配合一起使用的，它不能用于普通字符串（也就是单引号或双引号的字符串）。对于这一点，大家可以自行测试一下。

可能小伙伴会问了：“为什么它叫模板字符串呢？ ‘模板’ 二字又该怎么去理解呢？” 其实原因很简单，就拿上面这个例子来说，“欢迎${user}来到${website}” 这一串东西就像是模板一样，每次 user、website 这些变量的值改变时，它最终的值也会跟着改变，但是它的形式是不变的，都是下面这种形式。

欢迎xxx来到xxx

接下来我们再来看几个例子，以便加深对模板字符串的理解。

示例 5：模板字符串的应用（1）

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = ["HTML", "CSS", "JavaScript"];

        const strHtml = `<ul>
            <li>${arr[0]}</li>
            <li>${arr[1]}</li>
            <li>${arr[2]}</li>
        </ul>`;
        document.body.innerHTML = strHtml;
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript 模板字符串的应用（1）

分析：

在这个例子中，如果我们把 const arr = ["HTML", "CSS", "JavaScript"]; 换成下面代码，此时页面效果如下图所示。

const arr = ["red", "green", "blue"];

JavaScript 模板字符串的应用（2）

示例 6：模板字符串的应用（2）

运行代码

const d = new Date();

// 获取年、月、日
const year = d.getFullYear();
let month = (d.getMonth() + 1).toString().padStart(2, "0");
let day = d.getDate().toString().padStart(2, "0");

const time = `${year}-${month}-${day}`;
console.log(time);

运行结果如下。

2020-10-01

分析：

padStart() 方法用于在字符串的 “开头” 进行填充补全小伙伴们可以对比下面 2 种方式的不同。

// 传统方式
const time = year + "-" + month + "-" + day;

// 模板字符串
const time = `${year}-${month}-${day}`;

学到这里，有些小伙伴可能会这样想：“如果平常定义普通字符串的时候，我们能不能使用反引号来定义呢？” 那肯定是没问题的，下面 3 种方式其实是等价的，都可以用于定义一个字符串。

// 单引号
const str = '绿叶网';

// 双引号
const str = "绿叶网";

// 反引号
const str = `绿叶网`;

只不过在实际开发中，如果仅仅是定义一个普通字符串，我们更加倾向于使用单引号或双引号。如果需要字符串拼接或者多行字符串时，我们再去使用模板字符串。

深入了解模板字符串

接下来我们来深入了解一下模板字符串，并且给大家扩展更多开发技巧，主要包括以下 2 个方面。

字符串原生输出
“${}” 插入表达式

1. 字符串原生输出

对于字符串拼接来说，如果使用 “+” 来实现，拼接出来的字符串会丢失格式（包括缩进、换行等）。但是使用模板字符串，却可以保留这些格式。

示例 7：使用传统方式

运行代码

const str = "绿叶网" +
            "JavaScript";
console.log(str);

运行结果如下。

绿叶网JavaScript

分析：

对于 “+” 实现的字符串拼接，虽然两个字符位于不同行，但是最终拼接成的字符串是在一行显示的。

示例 8：使用模板字符串

运行代码

const str = `绿叶网
             JavaScript`;
console.log(str);

运行结果如下。

绿叶网
             JavaScript

分析：

对于这个例子，小伙伴可以思考一下为什么控制台第 1 行前面没有空白，而第 2 行前面会有一段空白呢？

示例 9：保留引号

运行代码

const str = `我是站长,
欢迎小伙伴们来到"绿叶网"！`
console.log(str);

运行结果如下。

我是站长,
欢迎小伙伴们来到"绿叶网"！

分析：

在模板字符串中，单引号和双引号是不需要转义的，可以直接保留下来。

2. “${}” 插入表达式

我们都知道，在模板字符串中，可以使用 “${}” 来插入一个变量。实际上，${} 内部除了可以插入一个变量，还可以插入一个表达式。

示例 10： “${}” 插入表达式

运行代码

const x = 10;
const y = 20;
const sum = `${x} + ${y} = ${x + y}`;
console.log(sum);

运行结果如下。

10 + 20 = 30

分析：

“${}” 内部不仅可以是变量，也可以是表达式，例如 “${x+y}” 。这种方式在实际开发中也是经常会见到。

最后，我们再来总结一下模板字符串，有以下重要的 4 点。

凡是使用 “反引号” 括起来的字符串，就叫做模板字符串。模板字符串本质上是一个字符串。
对于字符串拼接，我们更加推荐使用模板字符串来实现，而不是使用 “+” 的方式来实现。
“${}” 只能用于模板字符串，不能用于普通字符串。
我们同样可以使用 “反引号” 来定义一个字符串，只不过一般情况下不会这样去做。