Virgule inattendue dans map()

Question

J'ai un tableau contenant une liste d'éléments et j'essaie d'ajouter cette liste à un élément HTML en utilisant des chaînes de modèle :

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>

En conséquence, j'obtiens une virgule inattendue entre chaque élément de la liste. (Vous pouvez le voir lorsque vous exécutez l'extrait de code ci-dessus).

Comment puis-je éviter cela ?

Answer 1

Explication

littéraux de modèle utiliser le toString() qui, par défaut, joint le tableau retourné par la méthode map avec un , .
Pour éviter ce "problème", vous pouvez utiliser join('')

Code

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() renvoie un tableau . Vous voulez probablement renvoyer un chaîne de caractères contenant les éléments du tableau concaténés ensemble. Vous pouvez le faire avec .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>

Answer 3

Comme d'autres l'ont souligné (et je vais le répéter pour être complet), Array.prototype.map renvoie un nouveau tableau qui contient les éléments qui sont modifiés dans la fonction qui lui est passée.

Lorsque vous concaténerez un tableau à une chaîne de caractères (ce qui est le cas ici), le tableau sera également converti en chaîne de caractères. Et lorsqu'un tableau est converti en chaîne, il est automatiquement joint par des virgules.

const arr = ['<a>', '<b>'];

console.log(arr + ""); // <a>,<b>

En plus d'utiliser .join() pour transmettre explicitement une chaîne vide en tant que séparateur, vous pouvez également remplacer la balise .map() avec un Array.prototype.reduce pour réduire le tableau à une seule valeur.

description.reduce((acc, work) => acc + `<li>${work}</li>`, '')

Le code complet ressemblerait donc à ceci :

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>

Answer 4

Pour simplifier votre code, j'utilise simplement ce qui suit : ${description.map((travail) => <li>${work}</li> ).join('')}