Cara paling efisien untuk menggabungkan string dalam JavaScript?

163

Dalam JavaScript, saya memiliki loop yang memiliki banyak iterasi, dan di setiap iterasi, saya membuat string besar dengan banyak +=operator. Apakah ada cara yang lebih efisien untuk membuat string? Saya sedang berpikir tentang membuat array dinamis di mana saya terus menambahkan string ke sana dan kemudian bergabung. Adakah yang bisa menjelaskan dan memberikan contoh cara tercepat untuk melakukan ini?

— akhir
sumber

2

Untuk apa Anda menggunakan string? Setiap tips kinerja tentang hal ini akan bervariasi berdasarkan lingkungan Anda, ukuran string Anda, bagaimana mesin js tertentu mengoptimalkan operasi yang berbeda, dll.

— Ben McCormick

1

mungkin merupakan duplikat dari stackoverflow.com/questions/7299010/…

— rab

5

Periksa tautan ini jsperf.com/join-concat/2

— rab

Saya menggunakan IE9 tetapi dalam mode kompatibilitas IE8 (yang tidak dapat saya ubah). String besar adalah sesuatu yang akan saya masukkan ke DOM menggunakan jquery.

— omega

Lihat juga JavaScript string concatenation

— Bergi

135

Tampaknya berdasarkan tolok ukur di JSPerf bahwa menggunakan +=adalah metode tercepat, meskipun tidak harus di setiap browser.

Untuk membangun string di DOM, tampaknya lebih baik untuk menyatukan string terlebih dahulu dan kemudian menambahkan ke DOM, daripada iteratif menambahkannya ke dom. Anda harus membandingkan sendiri kasing Anda.

(Terima kasih @zAlbee untuk koreksi)

— Jakub Hampl
sumber

1

Lihatlah ke halaman yang tertaut. Sepertinya ada sedikit perbedaan antara +=dan melakukan join pada array.

— Jakub Hampl

Tampaknya menambahkannya ke DOM untuk setiap string adalah 66%(Untuk IE9) lebih cepat daripada membuat string keluar dan kemudian menambahkan string ke DOM.

— omega

halaman tertaut menggunakan + = untuk kedua tes, tidak ada .join () yang terlihat, jadi ini adalah tes yang tidak berarti yang hanya menunjukkan noise sebagai "perbedaan". contoh yang bagus tentang bagaimana berisik js bisa ... dom lebih lambat dari string, jadi gunakan dengan hemat.

— Dandavis

Waktu hanyalah satu komponen. Untuk rutinitas berulang, saya bertanya-tanya apa dampaknya terhadap GC di antara berbagai metode?

— David Bradley

Untuk string yang besar, array.join mungkin lebih karena string yang concat sangat menyenangkan memori bug bugs.chromium.org/p/v8/issues/detail?id=3175

— mwag

70

Saya tidak punya komentar tentang rangkaian itu sendiri, tetapi saya ingin menunjukkan bahwa saran @Jakub Hampl:

Untuk membangun string di DOM, dalam beberapa kasus mungkin lebih baik untuk menambahkan iteratif ke DOM, daripada menambahkan string besar sekaligus.

salah, karena didasarkan pada tes yang cacat. Tes itu tidak pernah benar-benar ditambahkan ke DOM.

Tes tetap ini menunjukkan bahwa membuat string sekaligus sebelum merendernya jauh, JAUH lebih cepat. Ini bahkan bukan kontes.

(Maaf ini adalah jawaban yang terpisah, tetapi saya belum memiliki cukup perwakilan untuk mengomentari jawaban.)

— zAlbee
sumber

4

Saya pikir itu layak menjadi jawaban untuk dirinya sendiri karena itu berisi tes dan kesimpulan (meskipun tes ini didasarkan / terinspirasi pada jawaban lain, itu harus baik-baik saja), tidak perlu untuk minta maaf.

— user202729

14

Tiga tahun yang lalu sejak pertanyaan ini dijawab tetapi saya tetap akan memberikan jawaban saya :)

Sebenarnya, jawaban yang diterima tidak sepenuhnya benar. Tes Jakub menggunakan string hardcoded yang memungkinkan mesin JS untuk mengoptimalkan eksekusi kode (Google V8 sangat bagus dalam hal ini!). Tapi begitu Anda menggunakan string yang benar-benar acak (di sini adalah JSPerf ) maka rangkaian string akan berada di tempat kedua.

— Volodymyr Usarskyy
sumber

Menariknya dengan Chrome 54 dan Firefox 45 di mesin Windows saya, concat lebih dari dua kali lebih cepat daripada dua lainnya menggunakan versi Anda. IE 11 memiliki ketiganya selambat non-concat di dua browser lainnya.

— ShawnFumo

4

Ini berbeda dari versi ke versi. Saya kira, saat ini VM Chrome mungkin berisi beberapa pra-optimasi untuk kasus ini. Saya menguji lagi pada Chrome v53 dan rangkaian sekarang adalah solusi tercepat: D Perangkat keras yang sama tetapi versi Chrome yang berbeda memberikan hasil yang sama sekali berbeda.

— Volodymyr Usarskyy

8

Anda juga dapat melakukan string concat dengan templat literal . Saya memperbarui tes JSPerf poster lain untuk memasukkannya.

for (var res = '', i = 0; i < data.length; i++) {
  res = `${res}${data[i]}`;
}

— Pecah-pecah
sumber