es6模板字符串

字符串拼接是开发时一个必不可少的环节，也是很恶心的一个环节，尤为是又臭又长的html字符串拼接。

为何说html字符串拼接很恶心呢，主要有如下几点：

1. 传统的字符串拼接不能正常换行
2. 传统的字符串拼接不能友好的插入变量
3. 传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。

es6的模板字符串解决了以上问题

es6 使用``(windows键盘英文输入法下tab键上面那个键)来定义一个字符串。

var s = `hello world`

咱们一般这样拼接html字符串。

var html = '<ul>'+ '<li>1</li>'+ '<li>2</li>'+ '</ul>'

若是html标签里面有其余的引号，那就更恶心了，可是，使用es6，只须要这要就ok了。

var html = `<ul> <li>1</li> <li>2</li> </ul>`

在windows键盘上，``是英文输入法下tab按键上面那个键。

它一样支持变量的嵌套，甚至功能更增强大

var s1 = `hello vue`; `xxx ${s1} xxx` //xxx hello vue xxx

{}里面能够插入任何js表达式，还能够是一个对象、数组，甚至是一个函数。

对象或者数组会调用它们的todtring()方法

var obj = {a:1,b:2}; `xxx ${obj} xxx`//xxx [object Object] xxx

var arr = [1,2,3]; `xxx ${arr} xxx`//xxx 1,2,3 xxx

函数分两种状况：

1. 函数自己，一样会调用它的tostring()方法
2. 直接调用函数，则输出函数的返回值

var fn1 = function(){ console.log('hello vuex'); } var fn2 = function(){ return 'hello vue-router' } `xxx ${fn1}`//xxx function fn(){....} `xxx ${fn1()}`//xxx underfind `xxx ${fn2()}`//xxx hello vue-router

若是{}里面的变量是个不存在的变量呢？