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)

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

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

本文系作者 @ 原创发布在 徐小鹏的个人分享博客。未经许可,禁止转载。

喜欢()
评论 (0)
21 文章
7 评论
1 喜欢
Top