es6学习：字符串模板

es6字符串模板新增功能：

1：字符串拼接可支持换行

2：支持插入变量和函数

接下来我会写几个例子来展示一下与es5之间的区别

es5写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="list">
    <li class="item">
        <p class="name">aa</p>
        <p class="age">10</p>
    </li>
</ul>
</body>
<script>
    var data=[{id:1,name:'测试一',age:10},{id:2,name:'测试二',age:20},{id:3,name:'测试三',age:30}];
    var html='';
    for(var i=0;i<data.length;i++){
        /*
        字符串模板拼接不支持换行，必须引号拼接
        插入变量必须要经过单双引号转换
        */
        html+='<li class="item" id="'+data[i].id+'">' +
                '<p class="name">'+data[i].name+'</p>' +
                '<p class="age">'+data[i].age+'</p>' +
               '</li>';
    }
    document.getElementById('list').innerHTML=html;
</script>
</html>

es6写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="list"></ul>
</body>
<script>
    const data=[{id:1,name:'测试一',age:10},{id:2,name:'测试二',age:20},{id:3,name:'测试三',age:30}];
    function testFun() {
       return 'testString' 
    }
    let html='';
    for(let i=0;i<data.length;i++){
        /*
        字符串模板拼接支持换行，无须引号拼接
        插入变量通过${}形式即可,也可以直接插入函数
        */
      let id= data[i].id;
      let name= data[i].name;
      let age= data[i].age;
      html+='<li class="item" id="${id}">
                  <p class="name">${name}</p>
                  <p class="age">${age}</p>
                  <p class="test">${testFun()}</p>
              </li>';
    }
    document.getElementById('list').innerHTML=html;
</script>
</html>

es6学习：字符串模板

猜你喜欢