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

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ