I&#39;ve an array with a list of elements and I&#39;m trying to append this list to an HTML element using template strings:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var description = [
      &#39;HTML &amp; CSS&#39;,
      &#39;Javascript object-oriented programming&#39;,
      &#39;Progressive Web apps (PWAs)&#39;,
      &#39;Website Performance Optimization&#39;,
      &#39;Webpack and Gulp workflows&#39;,
      &#39;Fullstack React.js&#39;,
      &#39;Web Components&#39;,
      &#39;Responsive web design&#39;,
      &#39;Sketch design&#39;,
      &#39;GraphQL and Relay&#39;
    ]

    $(&#39;body&#39;).append(
      `
      &lt;div class=&quot;description&quot;&gt;
        &lt;ul&gt;
          ${description.map(
            function(work) {
              return `&lt;li&gt;${work}&lt;/li&gt;`
            }
          )}&lt;/ul&gt;
      &lt;/div&gt;
      `
    )

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- end snippet --&gt;

As a result I get an unexpected comma between each list element. (You can see this when you run the code snippet above.)

How can I avoid this?

All array.prototype.map Solutions on Gang of Coders

Total of 1 array.prototype.map Solutions

Unexpected comma using map()