陣列展開和逗號分隔

前言 - Prologue

在 JavaScript 中，使用模板字面值（Template literals）可以方便地動態生成字串。然而，當我們使用模板字面值插入陣列時，有時會遇到一個問題：在每個陣列元素之間會自動插入逗號，導致不符合我們的預期。

正文 - Main text

在模板字面值中，當使用 map 函式返回一個陣列時，陣列的元素之間會自動添加逗號。

這是因為模板字面值將陣列視為一個整體，並在每個元素之間插入逗號，以表示它們是分開的項目，這種行為稱為 "陣列展開"。

舉個例子，假設有一個陣列 numbers 包含數字 [1, 2, 3, 4, 5]。

如果我們使用模板字面值將這個陣列插入到 HTML 中，會像這樣：

const numbers = [1, 2, 3, 4, 5];
const html = `<div>${numbers}</div>`;
console.log(html);

輸出的結果會是：

<div>1,2,3,4,5</div>

可以看到陣列的元素之間自動插入了逗號。

如果我們想要在不插入逗號的情況下顯示陣列的元素，可以使用 join 方法將字串陣列合併為一個字串。

修改程式碼如下：

const numbers = [1, 2, 3, 4, 5];
const html = `<div>${numbers.join('')}</div>`;
console.log(html);

輸出的結果會是：

<div>12345</div>

可以看到這次陣列的元素之間沒有逗號，而是直接合併成了一個字串。

這種用法也可以應用在下列例子中。當使用 map 函式將 TaskList 陣列轉換為一個由 <p> 元素組成的字串陣列時，使用 join('') 方法將 map 返回的字串陣列合併為一個字串，這樣就不會有逗號出現了。

<div data-class='taskWrapper'>
  ${taskList.map(task => `<p>${task}</p>`).join('')}
</div>

後記 - Epilogue

透過適當地使用 join 方法，我們可以在使用模板字面值插入陣列時獲得更清晰且符合預期的結果，這是處理陣列展開時避免逗號問題的一種常見技巧。