ES6 Template String 雙陣列處理方式

發表於 2019-06-14 分類於 JavaScript

Google AD

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

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

範例

1 2	<div id="app"> </div>

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;

.badge {
  background: red;
  color: #fffff;
}

撰寫

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

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;

因為會變成這樣子

原本我嘗試過這樣寫

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

所以要這樣寫才對

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 都是一個小標籤樣式，而不是整排

文章可以參考這篇

文章參考

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