ES6 模板字面量

模板字面量是 ECMAScript 2015/ES6 中引入的一项新功能。 它提供了一种简单的方法来创建多行字符串并执行字符串插值。 模板字面量是字符串字面量，并允许嵌入表达式。

在 ES6 之前，模板字面量被称为模板字符串。 与字符串中的引号不同，模板字面量由反引号 (` `) 字符（QWERTY 键盘中 ESC 键下方的键）括起来。 模板字面量可以包含占位符，这些占位符由美元符号和花括号 ($(expression}) 表示。 在反引号内，如果我们想使用表达式，那么我们可以将该表达式放在 ($(expression}) 中。

语法

多行字符串

在普通字符串中，我们必须使用转义序列 \n 来为创建多行字符串提供新行。 但是，在模板字面量中，不需要使用 \n ，因为字符串仅在获得反引号 (`) 字符时才会结束。

让我们尝试通过以下示例来理解它。

示例

输出

Without template literal
 multiline string
Using template literal
multiline string

字符串插值

ES6 模板字面量 支持字符串插值。 模板字面量可以使用占位符进行字符串替换。 要将表达式嵌入到普通字符串中，我们必须使用 ${} 语法。

示例 1

输出

Hello, World!
Welcome to javaTpoint

让我们看看另一个字符串插值的例子。

示例-2

输出

The product of the variables 10 and 20 is:
200

带标签的模板

带标签的模板是 模板字面量 的更高级形式之一。 带标签的模板字面量允许我们使用函数解析模板字面量。

标签函数的第一个参数包含一个具有字符串值的数组，其余参数与表达式相关。 带标签的字面量的写法与函数定义类似，但调用带标签的字面量时会出现差异。 调用字面量不需要括号 ()。

让我们看看带标签的模板的说明。

示例-1

输出

[ 'Hello World' ]

示例-2

我们也可以在带标签的字面量中传递值。 该值可以是某些表达式的结果，也可以是从变量中获取的值。 我们可以在以下代码中看到相同的说明

输出

[ 'Colors ', ' ', '' ]
Hello World    40

原始字符串

模板字面量 raw 方法允许访问输入的原始字符串。 除此之外，string.raw() 方法用于创建与默认模板函数类似的原始字符串。 它允许我们像在正则表达式文字中那样编写反斜杠。

string.raw() 方法用于显示字符串，而无需解释任何反斜杠字符。 它也有助于打印 windows 子目录位置，而无需使用大量反斜杠。

示例

输出

Hello \n World \n Welcome back!

String.fromCodePoint()

此方法返回一个字符串，该字符串是通过使用指定的 Unicode 代码点序列创建的。 如果传递了无效的代码点，则会抛出 RangeError。

示例

输出

1
PL