ECMAScript 6 语法学习——模版字面量

概述

在ECMAScript 6 中，引入了对字符串的操作进行增强的方式模版字面量。

基础语法

模版字面量的基础语法就是用反引号（`）来替换字符串中的单、双引号
在模版字面量中，无需转移单、双引号；但对于反引号需要使用反斜杠（\）进行转义

如这段代码示意

// 直接使用反引号（`）号包裹字符串
let messageA = `Hello World`
// 无需转义单引号（'）和双引号（"）
let messageB = `'Hello' "World"`
// 对于字符串中的反引号（`），使用反斜杠（\）进行转义
let messageC = `Hello \` World`

多行字符串

在ECMAScript 5中，如果要将一个字符串分为多行书写，可以使用如下两种方式实现

在一行的结尾出添加反斜线（\）
使用加号（+）来拼接字符串

代码示例

// 使用JavaScript的语法特性（bug）实现换行
let messageA = "Hello \
    World"
// 使用字符串拼接操作实现换行
let messageB = "Hello"
    + " World"
// 两种输出结果均为“Hello World”
console.log(messageA)
console.log(messageB)

以上两种方式只是实现了字符串的拼接操作，因此输出并未跨行显示

如需实现换行输出，需要手动添加换行符（\n）

let messageC = "Hello \n\
    World"
let messageD = "Hello"
    + "\n"
    + "World"
// 输出
console.log(messageC)
console.log(messageD)

以上代码的输出结果均为

Hello
World

而在ECMAScript 6 中，使用模版字面量的语法如下

代码示例

// 直接进行换行操作
let message = `Hello
    World`
// 输出
console.log(message)

以上代码的输出结果为

Hello
World

我们可以看出，使用ECMAScript 6的模版字面量进行多行字符串的换行时，会将反引号内的所有空白字符（包括但不限于空格、换行符、制表符）都作为字符串的一部分进行输出。

字符串占位符

在ECMAScript 6的模版字面量中，可以将JavaScript变量或者任何合法的JavaScript表达式嵌入占位符中并将其作为字符串的一部分输出到结果中。

代码示例如下

let name = "John"
let message = `Hello ${name}`
console.log(message)

let amount = 5
let price = 23.5
let total = `The total price is ${price * amount}`
console.log(total)

模版字面量本身也是JavaScript表达式，因此可以嵌套使用，代码示例如下

let name = "John"
let message = `Hello, ${
        `my name is ${name}`
    }.`
// 输出结果“Hello, my name is John.”
console.log(message)