Saya memiliki array dengan daftar elemen dan saya mencoba menambahkan daftar ini ke elemen HTML menggunakan string templat:

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>

Akibatnya saya mendapatkan koma yang tidak terduga di antara setiap elemen daftar. (Anda dapat melihat ini saat menjalankan cuplikan kode di atas.)

Bagaimana saya bisa menghindari ini?

85
Lc0rE 22 Agustus 2017, 11:05

3 jawaban

Jawaban Terbaik

Penjelasan

literal template menggunakan metode toString() yang secara default bergabung dengan larik yang dikembalikan dengan map dengan ,.
Untuk menghindari "masalah" ini, Anda dapat menggunakan join('')

Kode

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>
162
Brandon Benefield 4 Februari 2018, 08:38

.map() mengembalikan array. Anda mungkin ingin mengembalikan string yang berisi elemen array yang digabungkan menjadi satu. Anda dapat melakukannya dengan .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>
25
Michael Geary 22 Agustus 2017, 08:11

Seperti yang telah ditunjukkan orang lain (yang akan saya ulangi demi kelengkapan), Array.prototype.map mengembalikan larik baru yang berisi elemen yang diubah dalam fungsi yang diteruskan ke sana.

Saat Anda menggabungkan array ke string (yang terjadi di sini), array juga akan diubah menjadi string. Dan ketika sebuah array diubah menjadi string, maka secara otomatis digabungkan menggunakan koma.

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

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

Selain menggunakan .join() untuk secara eksplisit meneruskan string kosong sebagai pemisah, Anda juga dapat menggunakan Array.prototype.reduce untuk mengurangi array menjadi satu nilai.

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

Jadi kode lengkapnya akan terlihat seperti ini:

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>
1
Ivar 2 Juli 2020, 08:10