ES6 字符串模版用法和例子

前言

字符串模版为了优化以前那种双引号，单引号那种恶心的写法。优化语法增加代码的可读性且可写性。都比较简单，看一下案例就知道怎么用了。

---

以前写法：

var name = "Jane"
var before = "<div><span class = 'class'"+
             "style='color:red'>"+name+
             "</span></div>"

---

ES6写法：

var name = "Jane"
var es6 = `<div><span class = "class" style="color:red;">${name}</span></div>`

案例

这里用各种语法糖实例说明，请大家阅读下面案例，就能知道如何使用了。

插入变量：

let name = "Jane"
let age = "16"
var template = `<div>${name}:${age}</div>`

---

多行写法：

let name = "Jane"
let age = "16"
var template = `<div>
                    姓名是${name}
                    年龄是${age}
                </div>`

---

输出`号：

var template = `<div>Jane：\`16\`</div>`

---

使用方法：

let fun = () => 'Jane:16'
var template = `<div>${fun()}</div>`
//或者
var template = `<div>${() => 'Jane:16'}</div>`

---

计算：

var template = `<div>Jane:${10+6}</div>`
//<div>Jane:16</div>

---

三元式：

let bool = true
var template = `<div>Jane:${true?"16":"0"}</div>`
//<div>Jane:16</div>

---

二元式：

let bool = false
var template = `<div>Jane:${bol||"16"}</div>`
//<div>Jane:16</div>

---

遍历数组：

let arr = [{name:'Jane',age:'4'},{name:'Tom',age:'6'},{name:'Pink',age:'5'}]
var template = `<div>${arr.forEach(v=>'<span>'+v.name+':'+v.age+'</span>')}
//或者
var template = `<div>${arr.map(v=>'<span>'+v.name+':'+v.age+'</span>')}
</div>`

---

嵌套再嵌套：

let bool = true
let name = "Jane"
let age = "16"

var template = `<div><span>${bool?`姓名:${name}`:`年龄:${age}`}</span></div>`
document.getElementById("id").innerHTML = template;
//<div><span>姓名:Jane</span></div>

附：ES6转换ES2015

http://blog.youkuaiyun.com/rth362147773/article/details/78275551