ES6 lesson8 – es6模板字符串实例

首先我们准备一个对象(数据)

const Fea = {
  name: 'Fea Hsu',
  age: 26,
  todos: [
    { name: 'Read book', complated: false },
    { name: 'Chat with the girl', complated: true },
    { name: 'Write blog', complated: false }
  ]
}

我们现在来用字符串模板的形式展示一下Fea需要做的事情(todos):

const template = `
<ul>
<li>${Fea.todos[0].name}</li>
<li>${Fea.todos[1].name}</li>
<li>${Fea.todos[2].name}</li>
<ul>
`
document.body.innerHTML = template
  • Read book
  • Chat with the girl
  • Write blog

可是一个个的粘贴看起来很low,且对付大量数据时,C和V键要按坏,所以稍加改造:

const template = `
<ul>
${ Fea.todos.map(todo => `<li>${ todo.name }</li>`).join('') }
<ul>
`
document.body.innerHTML = template

有木有看到,模板字符串是可以嵌套的,而且是无限嵌套。

我们再把上面的显示结果美化一下,可以用bootstrap。

最后我们把代码分离一下,变成下面这个样子:

function todoStatus (todos) {
return `${ todos.map((todo, index) => `
<tr>
<th scope="row">${ index + 1 }</th>
<td>${ todo.name }</td>
<td>${ todo.complated ? '完成' : '未完成' }</td>
</tr>
`).join('') }`
}

const template = `
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Complated</th>
</tr>
</thead>
<tbody>
${ todoStatus(Fea.todos) }
</tbody>
</table>
`
document.body.innerHTML = template

这样子,就很完美了。


ES6还为我们新增了一些字符串的操作函数:

startWith()

endWith()

includes()

repeat()

本文系作者 @ 原创发布在 徐小鹏的个人分享博客。未经许可,禁止转载。

喜欢()
评论 (0)
14 文章
7 评论
0 喜欢
Top