JavaScript Array.map（）がDOMにコンマを追加します

Question

hereからいくつかの宝くじ結果をレンダリングしようとしています。 私は、すべてのデータがうまくなって、このようなページをレンダリングするためにwinning_numbers、mega_ball、及び乗算値を結合したいのです：

代わりに私が取得していますどのような数字ですが、カンマでだけでなく、これが示しようにDOMにレンダリング：コンソールで

const url = 'https://data.ny.gov/resource/h6w8-42p9.json'; 

$.get(url, (data) => { 
// Deconstruct Array Data 
[latest, one, two, three] = data; 

const pastResults = [one, two, three] 

// Removed A Block of CODE for StackOverflow dealing with latest result since it works fine. 

pastResults.map(num => { 

    const numsArray = num.winning_numbers.split(" "); 
    numsArray.push(num.mega_ball); 
    numsArray.push("x" + num.multiplier.split("")[1]); 
    console.log(numsArray); 

    pastResultsBlock.append(` 
    <div class="col-12"> 
     <div class="animated flipInY past-result-item box-shadow"> 
     <div class="past-result-date">${moment(num.draw_date).format("MMM Do")}</div> 
     <div class="past-result-numbers"> 
      ${numsArray.map(number => `<span>${number}</span>`)} 
     </div> 
     </div> 
    </div> 
    `) 
    }) 

}) 

配列だけで正常に見えます。 DOMのレンダリング時には、毎回 "、"カンマが付きます。

ご意見やご感想をいただければ幸いです。

ここにはJSFiddleリンクがあります。 JSFiddle

Answer 1

デフォルトのArray::toStringメソッドに頼るのではなく、明示的にそれらを単に結合するだけです。

// Change 
`...${numsArray.map(number => `<span>${number}</span>`)}...` 
// to 
`...${numsArray.map(number => `<span>${number}</span>`).join("")}...`