He buscado y buscado, pero solo he encontrado soluciones para .join() los elementos en una sola cadena.
const createCard = () => { const pokemonTypes = ['grass', 'fire', 'water']; return ( `<div> ${pokemonTypes.map(type => `<div>${type}</div>`)} </div>` ) } document.body.insertAdjacentHTML("beforeend", createCard());Para algún contexto, estoy usando una API pero simplifiqué el código para que sea rápido y fácil de leer.
Estoy tratando de mostrar cada cadena en su propio div para poder diseñar cada div por separado... como botones codificados por colores: verde para hierba, azul para agua, rojo para fuego, etc.
Cuando ejecuto el código, las cadenas se muestran correctamente en su propio div, sin embargo, la coma permanece. Me gustaría que solo se muestren al lado de cada uno sin la coma que los separe.
El método .map() devuelve una matriz. En la plantilla literal `${}` js convertirá esta matriz en una cadena. Lo hace por defecto uniendo los elementos con comas. Puede unir la matriz a una cadena usted mismo sin una coma:
${pokemonTypes.map(type => `<div>${type}</div>`).join('')}Array.map devuelve una matriz como salida. Establecer esta matriz como el contenido html es lo mismo que convertir una matriz en una cadena.
Ejemplo
const numArray = [1, 2, 3]; console.log(numArray.toString());Convertir una matriz en una cadena siempre incluirá la coma en el medio.
Tu expresión es la misma que debajo de uno
document.body.insertAdjacentHTML("beforeend", [1, 2, 3]);Lo que tiene que hacer es unirse a esta matriz con una cadena vacía y establecer esta cadena única como el contenido html como se muestra a continuación.
Use .join('') para unir una matriz sin coma
const createCard = () => { const pokemonTypes = ['grass', 'fire', 'water']; return ( `<div> ${pokemonTypes.map(type => `<div>${type}</div>`).join('')} </div>` ); } document.body.insertAdjacentHTML("beforeend", createCard());Puede usar .join('') para cadenas concretas y el mismo tipo que se usa para diseñar.
const createCard = () => { const pokemonTypes = ['grass', 'fire', 'water']; return ( `<div> ${pokemonTypes.map(type => `<div class="${type}">${type}</div>`).join('')} </div>` ); } document.body.insertAdjacentHTML("beforeend", createCard()); .grass { color: green } .fire { color: red } .water { color: blue }