ES6 lesson7 – 模板字符串

在es5中我们常常会用到字符串拼接的功能，例如：

let name = 'Fea'
console.log('user name is: ' + name)
// user name is: Fea

这种写法在我们遇到多个变量需要拼接，或者是层级较为复杂的对象时，就会变得很混乱，一不小心就会写错掉。所以在es6中，可以用反引号来进行书写：

let name = 'Fea'
console.log(`user name is: ${name}`)
// user name is: Fea

上面的代码在sublime中会自动将美元符中的部分高亮。

我们在es5中还会用到另一种情况，拼接模板：

let template = '<div><p>this is content</p></div>'

这种写法在我们的模板代码较多时，将会变得无比痛苦，难以分清层级，所以我们可能会使用数组的形式：

在es6中，我们就可以很轻松的将上面的代码简化：

let template = [
  '<div>',
  '<p>this is content</p>',
  '</div>'
].join('')
console.log(template)

完美输出，直观的看到代码的缩进，而且还可以用美元符加变量进去。真的是非常的方便有木有。

下节课进行字符串模板的实际应用！