如何在 ECMAScript 6 中使用模板字符串文字？

ECMAScript 6 基本介绍

ECMAScript 6（ES6）是JavaScript的下一代规范，被称为JavaScript的新生代。ECMAScript是JavaScript的基础，规定了JavaScript语言的语法和一些基本的JavaScript特性。

支持ES6的浏览器版本已经比较普及了，但是如果需要兼容一些老版本的浏览器，还需要使用兼容性工具进行转换。下面，我们将重点介绍ES6中的模板字符串文字。

什么是模板字符串？

在ES6之前，我们使用单引号或双引号来表示字符串。这样的做法有时候会导致代码结构不够清晰，尤其是在需要对字符串内嵌变量进行处理时。而ES6引入了一种新的字符串表示方法，即模板字符串。

模板字符串可以通过反引号（`）包裹，内部可以包含换行符、制表符等特殊字符，还可以通过${}语法嵌入变量或表达式，使得字符串的拼接更加方便。

const name = 'Tom';

const age = 21;
console.log(`My name is ${name}, I am ${age} years old.`);

这样，就可以很方便地得到输出结果：My name is Tom, I am 21 years old.

模板字符串的应用

多行字符串的拼接

在ES5中需要使用字符串连接符（+）或者反斜杠（\）对字符串进行拼接，而在ES6中，可以直接使用模板字符串进行多行字符串的拼接。

const str = `多行字符串

可以很简单
地拼接起来`;
console.log(str);

输出结果为：

多行字符串

可以很简单
地拼接起来

字符串格式化

在ES5中，我们会通过字符串拼接的方式来进行字符串格式化，代码如下：

const name = 'Tom';

const age = 21;
console.log('My name is ' + name + ', I am ' + age + ' years old.');

而在ES6中，我们可以使用模板字符串进行字符串格式化：

const name = 'Tom';

const age = 21;
console.log(`My name is ${name}, I am ${age} years old.`);

这样可读性和编写效率都得到了提升。

HTML模板的生成

在Web开发中，我们需要经常生成HTML代码，并在其中嵌入动态数据。而在ES6中，通过模板字符串，我们可以非常方便地生成动态的HTML代码模板。

const item = { name: 'apple', price: 2.3 };

const tpl = `
  <div>
    <h3>${item.name}</h3>
    price: ${item.price}
  </div>
`;
console.log(tpl);

输出结果为：

<div>

  <h3>apple</h3>
  <p>price: <strong>2.3</strong></p>
</div>

总结

模板字符串在ES6中是一个非常实用的特性，它支持多行字符串的拼接、字符串格式化和HTML模板的生成等功能，大大提高了代码的可读性和编写效率。在实际开发中，我们可以充分利用模板字符串。如果要兼容老版本的浏览器，可以使用babel等工具进行转换。