在 template literals 裡面使用 Array map 出現不明逗號
不清楚什麼是 template literals 的捧友，可以參考 MDN
問題
在 template literals 裡面使用 Array map 時，map 方法回傳給我的內容卻多出了不明的逗號，用說的有點難懂，直接試試下面的程式碼吧！
const arr = ["1", "2", "3"];
console.log(`<ul>${arr.map((item) => `<li>${item}</li>`)}</ul>`);
執行上述程式，console 會印出下面的結果，在每個 <li></li> 之間多了一個逗號，
<ul><li>1</li>,<li>2</li>,<li>3</li></ul>
研究了一下終於找到問題啦！
原來是因為 Array map 會對回傳的陣列使用 toString()，也因為 Array 是用 , 分隔每個元素的，所以對 Array 使用 toString() 時自然而然會印出那些逗號！
解決方式
1. Array.join
最簡單的方式就是用 join('') 把陣列中的所有元素串在一起
const arr = ["1", "2", "3"];
console.log(`<ul>${arr.map((item) => `<li>${item}</li>`).join("")}</ul>`);
2. Array.reduce
另一種方式可以使用 Array 中的 reduce 方法：
const arr = ["1", "2", "3"];
console.log(
`<ul>${arr.reduce((acc, curr) => acc + `<li>${curr}</li>`, "")}</ul>`
);
基本上 map 能做到的功能，reduce 也都能實現，只是可能沒有那麼直觀。
以上兩種方法提供給大家，幫助大家避開這個坑 xD
Refs: