是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2019-06-14 JavaScript

ES6 Template String 雙陣列處理方式

#JavaScript

前言

今天在撰寫 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

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

什麼是 JavaScript 的 Generator Functions (function*)？

2025-12-05

JavaScript 數字格式化：最簡單的方法（千分位與貨幣）

2025-09-18

前端工程師應該要懂的瀏覽器渲染機制

2025-04-24

FizzBuzz for JavaScript

2025-02-04

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme