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)
完美输出,直观的看到代码的缩进,而且还可以用美元符加变量进去。真的是非常的方便有木有。
下节课进行字符串模板的实际应用!
本文系作者 @feacx 原创发布在 。未经许可,禁止转载。