ES6学习笔记之字符串模板(巩固复习)

ES6字符串模板
这个举个例子，先大概了解一下什么是字符转模板

    <script>
        let name='Kobe Bryant'
        let birthday="1978.8.23";
        let age= 41;
        let res = `他叫${name},生日是${birthday},今年${age}岁了`
        alert(res)
    </script>

字符串模板在``中（ESC下面的这个键）

字符串模板的优点是可以随意的换行，读取数据只需要写在${}中就OK了，非常的简单。而且不容易出错,不会再出现被 + 号的连接方法产生混乱

let data=[
            {name:'Michael Jordan',body:"前美国职业篮球运动员，司职得分后卫，绰号“飞人”（Air Jordan）"},
            {name:'Wilt Chamberlain',body:"出生于美国宾夕法尼亚州费城，前美国职业篮球运动员，司职中锋"},
            {name:'Isiah Thomas',body:"前美国职业篮球运动员，司职控球后卫，绰号“微笑刺客”（Baby-Faced Assassin）"},
            {name:'Julius Erving',body:"前美国职业篮球运动员，司职小前锋，绰号“J博士”（Dr.J），开创了现代篮球在空中、篮筐之上表演的先河"},
            {name:'Karl Malone',body:"前美国职业篮球运动员，司职大前锋，绰号“邮差”（The Mailman）"},
        ]

现在我们有上面的data数据，接下来我们用字符串模板的方式来遍历它们

<ul id="uli"></ul>
window.onload =function(){
            let oul =document.querySelector('#uli');
            for(let i= 0;i<data.length;i++){
                var oli =document.createElement('li')
                oli.innerHTML=`
                    <span>姓名:${data[i].name}</span>//注意这里
                    <span>介绍:${data[i].body}</span>//注意这里
                `
                oul.appendChild(oli)
            }
        }

这样一来就不会被非常多的+号连接方式而困扰