javascript - attribute - title html

Coma inesperado usando el mapa()

Question

Tengo una matriz con una lista de elementos:

  description: [
    ''HTML & CSS'',
    ''Responsive Design Fundamentals'',
    ''Javascript object-oriented programming'',
    ''jQuery'',
    ''Website Performance Optimization'',
    ''CRP and RAIL'',
    ''REST API and Ajax'',
    ''Javascript Design patterns'',
    ''Bootsrap Framework'',
    ''Polymer Web Elements''
  ],

Estoy tratando de adjuntar 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, obtengo una coma inesperada entre cada elemento de la lista (vea el fragmento a continuación)

¿Cómo puedo evitar esto?

EDITAR : fragmento añadido

Answer 1

Explicación

los literales de plantilla utilizan el método toString() que, de forma predeterminada, une la matriz devuelta por map con un,.
Para evitar este "problema" puedes usar join('''')

Código

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>

Answer 2

.map() devuelve una matriz . Probablemente quiera devolver una cadena que contenga los elementos de la matriz concatenados juntos. 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>