Почему появляются запятые после отработки цикла?

Question

[Evtera]

<header className="header">
	
		<nav className="navigation">
			${
				Array.from(data.anchor).map((value) => `<a href=${value.href}>${value.value}</a>`)
				}
		</nav>
</header>

Здравствуйте. Данный цикл пробегается по объекту, подставляет key.value и создает элемент в dom дереве. Но между этими элементами так же создаются запятые формата ",". Почему и как убрать?

Answer 1

[0xD34F]

Потому что при преобразовании массива в строку, согласно спецификации, используется метод join. Который по умолчанию в качестве разделителя (опять же, согласно спецификации) использует запятую.

"Как убрать" - очевидно, вызывать join самостоятельно, указывая пустую строку:

Array.from(data.anchor, n => `<a href="${n.href}">${n.value}</a>`).join('')

Или, есть вариант вместо join объединять строки с помощью concat:

''.concat(...[...data.anchor].map(n => `<a href="${n.href}">${n.value}</a>`))

Ещё можно (но не нужно) использовать оператор +:

Array.prototype.reduce.call(
  data.anchor,
  (acc, n) => acc + `<a href="${n.href}">${n.value}</a>`,
  ''
)

Answer 2

[Wondermarin]

<header className="header">
    <nav className="navigation">
      ${
        Array.from(data.anchor).map((value) => `<a href=${value.href}>${value.value}</a>`).join("\n")
        }
    </nav>
</header>