3.10 模板字符串

从语法上来说，这些模板字符串使用反引号（即'），而不是使用单引号（’）或双引号（"）。设计模板字符串的目的有3个。

● 字符串插值。

● 多行字符串。

● 标记模板。

1.字符串插值

一个常见的用例是，当你想要从一些静态字符串+一些变量中生成字符串时，你需要使用一些模板逻辑，这就是模板字符串名字的由来。下面可能是你之前生成HTML字符串所用的方法。

而如果使用模板字符串，那么你只需要这么做。

注意：在插值${和}中的任何占位符，都可以被看作JavaScript表达式来处理和执行。例如，你可以像下面这样做数学计算。

2.多行字符串

你是否曾经想在JavaScript字符串中添加换行符，或者想嵌入一些歌词？这时，你需要使用我们最喜欢的转义字符\来转义换行符，然后在下一行手动添加一个\n。示例如下。

在使用TypeScript时，你可以使用模板字符串。

3.标记模板

你可以在模板字符串前放置一个函数，它被称为tag。它将预处理模板字符串及其占位符的表达式，然后返回一个值。一些需要注意的要点如下。

● 所有静态字面量都将作为第1个参数传入数组。

● 占位符表达式的所有值都将作为其余参数传入，最常见的情况是，使用rest参数将这些参数转换为数组。

在下面的例子中，我们有一个标记函数（名字是htmlEscape），它将从所有占位符中转义HTML。

注意，你可以将placeholder注解为any[]类型，无论你将它注解成什么，TypeScript都将进行类型检查，以确保所调用占位符的类型与注解相匹配。例如，如果你想处理string或number类型的数据，你可以注解成...placeholders：（string|number）[]。

4.生成JavaScript

如果编译目标是ES6以上的版本，那么生成的代码会非常简单。多行字符串会被编译成转义字符串，字符串插值会被编译为字符串连接，标记模板则被称为函数调用。

5.小结

多行字符串和字符串插值在任何语言中都是很受欢迎的。现在你可以在JavaScript中使用它们，这很棒，感谢TypeScript。标记模板允许你创建功能强大的字符串实用程序。