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

Posted 2021-02-21 atsong

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>‘//最外层是单引号‘
}