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

若是{}裏面的變量是個不存在的變量呢？