Tengo una matriz con una lista de elementos y estoy tratando de agregar esta lista a un elemento HTML usando cadenas de plantilla:
var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${description.map( function(work) { return `<li>${work}</li>` } )}</ul> </div> ` ) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Como resultado, aparece una coma inesperada entre cada elemento de la lista. (Puede ver esto cuando ejecuta el fragmento de código anterior).
¿Cómo puedo evitar esto?
los literales de plantilla usan el método toString() que, de manera predeterminada, une la matriz devuelta por map con , .
Para evitar este "problema" puedes usar join('')
var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${ description.map(function(work) { return `<li>${work}</li>` }).join('') } </ul> </div> ` ) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>.map() devuelve una matriz . Probablemente desee devolver una cadena que contenga los elementos de la matriz concatenados. Puedes hacer eso con .join('') :
var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${description.map( function(work) { return `<li>${work}</li>` } ).join('') /* added .join('') here */}</ul> </div> ` ) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Como han señalado otros (que voy a repetir para completar), Array.prototype.map devuelve una nueva matriz que contiene los elementos que se modifican en la función que se le pasa.
Cuando concatena una matriz en una cadena (que es lo que está sucediendo aquí), también convertirá la matriz en una cadena. Y cuando una matriz se convierte en una cadena, se une automáticamente mediante comas.
const arr = ['<a>', '<b>']; console.log(arr + ""); // <a>,<b> Además de usar .join() para pasar explícitamente una cadena vacía como separador, también puede reemplazar .map() con Array.prototype.reduce para reducir la matriz a un solo valor.
description.reduce((acc, work) => acc + `<li>${work}</li>`, '')Así que el código completo se vería así:
var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${ description.reduce((acc, work) => acc + `<li>${work}</li>`, '') } </ul> </div> ` ) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>