模板字符串是为了解决传统字符串拼接不便利而出现的。我们先通过一个简单的例子来观察一下模板字符串与传统字符串的差别。

// ES5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

// ES6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

模板字符串使用反引号`` 将整个字符串包裹起来，变量或者表达式则使用${}来包裹。

除了能够在字符串中嵌入变量，还可以用来定义多行字符串。其中所有的空格，缩进，换行都会被保留下来。

var elemString = `<div>
    <p>So you crossed the line, how'd you get that far?</p>
    <p>${word} you give it a try.</p>
</div>`

大家可是尝试脑补一下用传统的'+'来拼接这段字符串，会发现非常的麻烦。

${}中可以放入一个变量，表达式，甚至一个函数。

// 变量
const hello = 'hello';
let message = `${hello}, world!`;

// 表达式
const a = 40;
const b = 50;
let result = `the result is: ${a + b}`;

// 函数
let fn = () => {
    const result = 'you are the best.';
    return result;
}
let str = `he said: ${fn()}`