ES6 模板字符串

ES6学习, JavaScript学习 本文总阅读量次

模板字符串

  • 模板字符串：允许嵌入表达式的字符串字面量。可以使用多行字符串和字符串插值功能。
  • 模板字符串使用反引号` 来代替普通字符串中的用双引号和单引号。
  • 模板字符串可以包含特定语法（${expression}）的占位符。(expression可以是变量/表达式)
  • 在模版字符串内使用反引号`**时，需要在它前面加**转义符\:
    1
    `\`` === "`" // --> true
  • 语法：
    1
    2
    3
    4
    5
    6
    7
    8
    `string text`

    `string text line 1
     string text line 2`

    `string text ${expression} string text`

    tag `string text ${expression} string text`

如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。

用于输入多行字符串

1
2
3
4
5
6
7
8
9
// 普通字符串
console.log('string text line 1\n' +
'string text line 2');
// 使用模板字符串，同样效果的多行字符串
console.log(`string text line 1
string text line 2`);
// 结果都如下
// "string text line 1
// string text line 2"

用于在字符串中插入表达式

1
2
3
4
5
6
7
8
9
10
11
12
// 普通字符串中嵌入表达式
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// 通过模板字符串
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// 结果都如下
// "Fifteen is 15 and
// not 20."

用于插入HTML代码

  • 一般我们在JS字符串中插入多行HTML时会很麻烦（见例子2）
  • 模板字符串中插入html代码时可以换行，**行尾不需要插入转义符\**。
  • 普通的字符串拼接插入html代码时不能换行，换行时**行尾需要插入转义符\**。

更多高级用法

ES6学习, JavaScript学习