在 ES6 中，引入了一种称为模板字符串（Template Strings）的新特性。模板字符串是一种更加方便和灵活的字符串拼接方式，可以在其中嵌入变量，函数调用，甚至是表达式等。
语法
模板字符串使用反引号（）包含起来，其中可以使用 ${}` 表示一个变量名、表达式或函数调用。例如：
const name = 'world';
console.log(`Hello, ${name}!`);输出结果为：
Hello, world!
另外，如果要在模板字符串中使用反引号本身，可以通过 \ 转义：
console.log(`This is a backtick (\`) character.`);
输出结果为：
This is a backtick (`) character.
多行字符串
传统的字符串拼接需要使用加号（+）来将多行字符串拼接成一个字符串。而在模板字符串中，则可以直接换行，从而实现多行字符串：
const message = `Hello, world!`; console.log(message);
输出结果为：
Hello, world!
同时，模板字符串还支持在换行符前使用空格，从而保留原始字符串中的空格和缩进：
const code = ` const message = 'Hello, world!'; console.log(message); `; console.log(code);
输出结果为：
const message = 'Hello, world!'; console.log(message);
标签模板
除了使用 ${} 插入变量外，模板字符串还支持使用标签模板（Tagged Templates）来自定义字符串的处理方式。标签模板在模板字符串前添加一个函数名，这个函数会在模板字符串被解析之前被调用，以及处理字符串中的变量和表达式，并返回处理后的字符串。例如：
-- -------------------- ---- -------
-------- -------------- ---------- -
--- ------ - ---
------- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- ------------------------
-
-
------ -------
-
----- ---- - --------
------------------------ -----------输出结果为：
Hello, WORLD!
上述代码中，upper 函数会将模板字符串中的变量名转换为大写并返回。标签模板可以实现更加灵活和定制化的字符串处理方式，例如对特殊字符的转义、安全性验证等。
总结
模板字符串是 ES6 中一个非常实用和方便的新特性。它能够使字符串拼接变得更加灵活和强大，同时还支持多行字符串和自定义处理函数，可以在前端开发中发挥重要作用。
示例代码
-- -------------------- ---- -------
----- ---- - --------
------------------- -----------
----------------- -- - -------- ---- -------------
----- ------- - -------
--------
---------------------
----- ---- - -
----- ------- - ------- --------
---------------------
--
------------------
-------- -------------- ---------- -
--- ------ - ---
------- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- ------------------------
-
-
------ -------
-
------------------------ -----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463d2ed968c7c53b04d0425