es6 模板字符串和模板占位符详解

ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings)。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 "
反撇好中的所有空白都属于字符串,所以千万要小心缩进!!
let a=1;
let b=2;
var arr=[1,2,3]
var htm=""
for (let i = 0; i <arr.length ; i++) {
//onclick事件 传入参数里面使用占位符一定要加单引号!!!
//反撇号` 里面即为模板字符串
htm+=`<div class="aa" onclick=tab('${a}','${b}')>${arr[i]}</div>`//最外层是反撇号`
}

在这个示例中,${a}和${b}和${arr[i]}被称为模板占位符

上面js等价于下面传统写法
for (let i = 0; i <arr.length ; i++) {
//onclick事件 传入参数里面使用占位符一定要加单引号!!!
htm+='<div  class="aa" onclick=add(\''+a+'\',\''+b+'\')>'+data[i]+'</div>'//最外层是单引'
}
 
posted @ 2020-04-26 16:12  颂先生  阅读(2214)  评论(0编辑  收藏  举报