前言
字符串模版为了优化以前那种双引号,单引号那种恶心的写法。优化语法增加代码的可读性且可写性。都比较简单,看一下案例就知道怎么用了。
以前写法:
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>