????今天呢,我們來(lái)看一下模板字符串的示例:
<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; //在網(wǎng)頁(yè)中顯示
</script>
????????創(chuàng)建一個(gè)render
函數(shù),加強(qiáng)了代碼的可讀性和擴(kuò)展性 使用map方法
遍歷todos
數(shù)組,注意map方法
返回的是一個(gè)數(shù)組,所以使用.join('')
方法刪掉逗號(hào)。
????????模板字符串是可以嵌套的,并且可以使用三元運(yùn)算符。