Карта массива в литерале шаблона отображает дополнительную запятую между элементами

Question

В следующем примере я пытаюсь отобразить список сообщений (заголовок, тело и их теги):

const container = $('.container');
posts.forEach((post)=> {
 container.append(
`<div>
  <h2>${post.title}</h2>
  <p>${post.body}</p>
  <div>
   ${post.tags.map((tag) => {
     `<span>${tag.name}</span>`
   })}
  </div> 
 </div>`)
});

В выводе отображается дополнительная запятая между тегами.Я попытался вывести «test» вместо фактических имен тегов, а также поменять тег span для другого HTML-тега, но результат все тот же.

Я пытался найти эту проблему, но не повезло найти кого-то еще, имеющего эту проблему с литералами шаблона.

Answer 1

Именно так работает Array.join () по умолчанию (который вызывается при неявной строковой записи массива), добавляя запятую между записями массива - что и возвращает map () -> массив.Вы можете легко избавиться от него, вызвав его самостоятельно, передав пустую строку в качестве аргумента функции join ()

${post.tags.map((tag) => `<span>${tag.name}</span>`).join('')}

Обратите внимание, что вам также нужно будет вернуться с карты ...