web-dev-qa-db-ja.com

map（）を使用した予期しないコンマ

私は要素のリストを持つ配列を持っています：

  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'
  ],

テンプレート文字列を使用してこのリストをHTML要素に追加しようとしています：

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>

その結果、各リスト要素の間に予期しないコンマが表示されます（以下のスニペットを参照）

どうすればこれを回避できますか？

[〜＃〜] edit [〜＃〜]：追加されたスニペット

javascriptarraysecmascript-6template-literalsarray.prototype.map
32
Lc0rE

説明

テンプレートリテラルmapによって返された配列をデフォルトで_,_と結合するtoString()メソッドを使用します。
この「問題」を回避するには、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>_
70
Roman

.map()はarrayを返します。おそらく、一緒に連結された配列要素を含むstringを返したいでしょう。 .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>
13
Michael Geary