JavaScript Array.map() 将逗号附加到 DOM

Question

我正在尝试呈现 here 的一些彩票结果。我很好地获取了所有数据，但希望将 Winning_numbers、mega_ball 和 multiplier 值结合起来呈现到页面，如下所示:

相反，我得到的是数字，但带有逗号渲染到 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("")}...`