一、模板字符串
格式:``
加入内容:`${变量名称...}`
传统的输出模板如下
{ var ul = document.getElementById("#uls"); var str = ''; var a = '这是一个a'; var p = '这是一个p'; str+='<li style="background:red">'; str+='<a href="#">'+a+'</a>'; str+='<p>'+p+'</p>'; str+='</li>'; uls.innerHTML +=str; }
es6输入模板如下(用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量${变量名称})
{ let ul = document.getElementById("#uls"); var a = '这是一个aaa'; var p = '这是一个ppp'; let str = `<li style="background:red"><a href="#">${a} <p>${p}</p></li>`; uls.innerHTML +=str; }
{ let username = "张三"; let usePwd="123"; console.info(`${username}===>${usePwd}`);//张三===>123 }
//可以进行运算 { let a = 1; let b = 2; console.info(`${a+b}`);//3 }
二、标签模板
紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串
{ //alert(123); alert`1234` }
{ let obj = { name:"张三", age:"男" } function fn(a,b,c){ console.log(a);//第一个参数是一个数组, //该数组的成员是模板字符串中那些没有变量替换的部分 // (3) ["login ", "admin", "", raw: Array(3)] return `${a}===>${b}===>${c}`; } console.info(fn`login ${obj.name}admin${obj.age}`);//login ,admin,===>张三===>男 }