ES6 Template String 雙陣列處理方式

前言

今天在撰寫 JavaScript 的時候發生一件事情,就是在 ES6 中的 Template String 在處理一次陣列的方式,這邊做一下紀錄怎麼處理

範例

1
2
<div id="app">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const app = document.getElementById('app');
let data = [{
"type": "a",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "b",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "c",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
}];

let str = '';
data.forEach((item, index) => {
str += `
<div>item:${item.type}</div> <br>
<div class="badge">array:${item.array}</div><br>
<div class="badge">array2:${item.array2}</div>`;
})
app.innerHTML = str;
1
2
3
4
.badge {
background: red;
color: #fffff;
}

撰寫

當我們今天的需求是希望每一個 array & array2 是一個 div 的時候,以下寫法就不太對了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const app = document.getElementById('app');
let data = [{
"type": "a",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "b",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "c",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
}];

let str = '';
data.forEach((item, index) => {
str += `
<div>item:${item.type}</div> <br>
<div class="badge">array:${item.array}</div><br>
<div class="badge">array2:${item.array2}</div>`;
})
app.innerHTML = str;

因為會變成這樣子

Image

原本我嘗試過這樣寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const app = document.getElementById('app');
let data = [{
"type": "a",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "b",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "c",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
}];

let str = '';
data.forEach((item, index) => {
str += `
<div>item:${item.type}</div> <br>
<div>array:${item.array.forEach((itemArray) => {
return `<span class="badge">${itemArray}</span>`
})}</div><br>
<div>array2:${item.array2.forEach((itemArray2) => {
return `<span class="badge">${itemArray2}</span>`
})}</div>`;
})
app.innerHTML = str;

但是這樣寫會發生一件事情,也就是 array & array2 會變成 undefined

undefined

所以要這樣寫才對

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const app = document.getElementById('app');
let data = [{
"type": "a",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "b",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "c",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
}];

let str = '';
data.forEach((item, index) => {
str += `
<div>item:${item.type}</div> <br>
<div>array:${item.array.map((itemArray) => {
return `<span class="badge">${itemArray}</span>`
})}</div><br>
<div>array2:${item.array2.map((itemArray2) => {
return `<span class="badge">${itemArray2}</span>`
})}</div>`;
})
app.innerHTML = str;

這樣就可以達到每一個 array & array2 都是一個小標籤樣式,而不是整排

Image

文章可以參考這篇

文章參考

Simple JavaScript template literals to insert iterated values (e.g. array elements) into HTML
ES6 map array to string without comma
Template Literals with a ForEach in it

0%