ES6 字串模板

發表於 | 更新於: | 分類於 ， |

先宣告等等會用到的陣列

1
2
3
4
5
const team = [
    {name: '鳴人'},
    {name: '佐助'},
    {name: '小櫻'}
]

傳統組字串

1
2
3
4
5
6
let str = '我叫做' + team[0].name
let UL = '<ul>\
    <li>我叫做' + team[0].name + '</li>\
    <li>我叫做' + team[1].name + '</li>\
    <li>我叫做' + team[2].name + '</li>\
</ul>'

ES6 字串模板

1
2
3
4
5
6
7
8
let str = `我叫做 ${team[0].name}`
let UL = `
<ul> 
    <li>我叫做 ${team[0].name}</li>
    <li>我叫做 ${team[1].name}</li>
    <li>我叫做 ${team[2].name}</li>
</ul>
`

進階 - 在${}內插入JS原始碼

1
2
3
4
5
let newUL = `
<ul> 
    ${ team.map(item => `<li>我叫做 ${item.name}</li>`) }
</ul>
`

這邊會有一個小問題，因為map回傳的會是陣列，我們試試在 console 執行下列程式碼。

1
team.map(item => `<li>我叫做 ${item.name}</li>`)

結果會回傳：

檢查 newUL：

如果輸出在 DOM 上會導致畫面出現多兩個逗號，這邊需要加上 join('') 將陣列轉成字串，並且透過('')過濾掉逗號。

1
2
3
4
5
let newUL = `
<ul> 
    ${ team.map(item => `<li>我叫做 ${item.name}</li>`).join('') }
</ul>
`

結果：