【ES6基础】模板字符串（Template String）

开篇

模板字符串是ES6中非常重要的一个新特性，这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号（backticks,`），而不是单引号或双引号。以下是个简单的示例：

let str1 = `hello!!!`; //template string
let str2 = "hello!!!";
console.log(str1 === str2); //output "true”

今天的文章将从以下几个方面进行介绍：

• 表达式

• 标签模板字符串（Tagged template literals）

• 多行字符串

• 原始字符串(Raw strings)

本篇文章阅读时间预计5分钟

01

表达式

模板字符串的出现，给ES6添加了“表达式”的概念。在ES6之前，我们只能用加号连接变量表达式，代码如下：

var a = 20;
var b = 10;
var c = "JavaScript";
var str = "My age is " + (a + b) + " and I love " + c;
console.log(str);

自从模板字符串表达式的出现后，我们嵌入表达式的方式更加简单，即${变量表达式}，变量表达式就相当函数一样，变量传值进行替换。如果我们要使用自定义的函数处理字符串，我们可以使用标签模板字符串（Tagged template literals），标签函数进行处理（a tag function）。下一小节将会讲到。先让我们看下如何使用模板字符串嵌入表达式，代码如下：

const a = 20;
const b = 10;
const