第十小节：字符串模板示例

    今天呢，我们来看一下模板字符串的示例：

<script>
const Lucy = {
    name:'Lucy',
    date:'2017-12-20',
    todos:[
        {name:'Go to Store',completed:false},
        {name:'Watch Movie',completed:true},
        {name:'Running',completed:true},
       ]
    }
    function renderTodos(todos) {   
      return(
        `<ul>
              ${Lucy.todos.map(todo => `
                <li>
                    ${todo.name} ${todo.completed ? 'yes' : 'no'}
               </li>
            `).join('')}
       </ul>`
      
          )
      }
    const template =`
        <div class="panel">
        <div class="panel-header">${Lucy.name}</div>
        <div class="panel-body">
             ${renderTodos(Lucy.todos)}
        </div>
        <div class="panel-footer">${Lucy.date}</div>
        </div>
        `
    document.body.innerHTML = template; //在网页中显示
</script>

        创建一个render函数，加强了代码的可读性和扩展性 使用map方法遍历todos数组，注意map方法返回的是一个数组，所以使用.join('')方法删掉逗号。
        模板字符串是可以嵌套的，并且可以使用三元运算符。