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

如果{}里面的變量是個不存在的變量呢？