Bagaimana untuk membina/menggabungkan rentetan dalam JavaScript?

Question

Adakah JavaScript menyokong penggantian/interpolasi?

Ikhtisar

---

Saya sedang mengusahakan projek JavaScript dan apabila ia semakin besar, ia semakin sukar untuk mengekalkan rentetan dalam keadaan yang baik. Saya ingin tahu apakah cara yang paling mudah dan paling tradisional untuk membina atau membina rentetan dalam JavaScript.

Pengalaman saya setakat ini:

Apabila projek menjadi lebih kompleks, gabungan rentetan mula kelihatan hodoh dan menjadi lebih sukar untuk dikekalkan.

Perkara yang paling penting pada ketika ini ialah kesederhanaan dan kebolehbacaan, fikirkan tentang sekumpulan bahagian yang bergerak, bukan hanya 2-3 pembolehubah.

Sama pentingnya, ia kini disokong oleh penyemak imbas utama (iaitu sekurang-kurangnya ES5).

Saya tahu singkatan sambungan JavaScript:

var x = 'Hello';
var y = 'dunia';
console.log(x + ', ' + y);

Terdapat juga fungsi String.concat.

Saya sedang mencari sesuatu yang lebih bersih.

Ruby dan Swift melakukan ini dengan cara yang menarik.

Ruby

var x = 'Hello'
var y = 'dunia'
cetak "#{x}, #{y}"

Swift

var x = "Hello"
var y = "dunia"
println("(x), (y)")
Saya fikir mungkin ada sesuatu yang serupa dalam JavaScript, mungkin sesuatu seperti sprintf.js. 
Soalan

Bolehkah ini dilakukan tanpa perpustakaan pihak ketiga? Jika tidak, apa yang boleh saya gunakan? 

Answer 1

Saya kecewa kerana tiada siapa dalam jawapan yang lain menjelaskan "cara terbaik" bermaksud "cara terpantas"...

Saya menarik dua contoh daripada di sini dan menambah str。 join() 和 str.reduce() daripada jawapan nishanths di atas. Berikut ialah keputusan saya pada Firefox 77.0.1 di Linux.

---

Nota: Saya dapati semasa menguji ini bahawa jika saya meletakkan str = str.concat() 和 str += secara langsung sebelum atau selepas satu sama lain, yang kedua sentiasa menunjukkan prestasi yang lebih baik...jadi saya menjalankan ujian ini secara individu dan mengulas tentang Keputusan yang lain...

Walaupun begitu , jika saya menjalankannya semula, kelajuannya berubah banyak , jadi saya mengukur setiap satu 3 kali.

1 aksara pada satu masa:

• str = str.concat()：841、439、956 毫秒 / 1e7 concat() 的
• ............str +=：949、1130、664 毫秒 / 1e7 +='s
• .......[].join(): [] 中有 3350, 2911, 3522 ms / 1e7 个字符
• ......[].reduce()：[] 中的 3954、4228、4547 毫秒 / 1e7 个字符

26 rentetan pada satu masa:

• str = str.concat()：444、744、479 毫秒 / 1e7 concat() 的
• ............str +=：1037, 473, 875 毫秒 / 1e7 +='s
• ........[].join(): 2693, 3394, 3457 ms / 1e7 字符串在 []
• ......[].reduce()：[] 中的 2782、2770、4520 ms / 1e7 字符串

---

Jadi, sama ada menambahkan 1 aksara pada satu masa atau 26 rentetan pada satu masa:

• Pemenang Jelas: Pada asasnya seri antara str = str.concat() 和 str +=
• Jelas kalah: [].reduce()，然后是 [].join()

---

Kod saya, mudah dijalankan dalam konsol penyemak imbas:

{
  console.clear();

  let concatMe = 'a';
  //let concatMe = 'abcdefghijklmnopqrstuvwxyz';

  //[].join()
  {
    s = performance.now();
    let str = '', sArr = [];
    for (let i = 1e7; i > 0; --i) {
      sArr[i] = concatMe;
    }
    str = sArr.join('');
    e = performance.now();
    console.log(e - s);
    console.log('[].join(): ' + str);
  }

  //str +=
  {
    s = performance.now();
    let str = '';
    for (let i = 1e7; i > 0; --i) {
      str += concatMe;
    }
    e = performance.now();
    console.log(e - s);
    console.log('str +=: ' + str);
  }

  //[].reduce()
  {
    s = performance.now();
    let str = '', sArr = [];
    for (let i = 1e7; i > 0; --i) {
      sArr[i] = concatMe;
    }
    str = sArr.reduce(function(pre, next) {
      return pre + next;
    });
    e = performance.now();
    console.log(e - s);
    console.log('[].reduce(): ' + str);
  }

  //str = str.concat()
  {
    s = performance.now();
    let str = '';
    for (let i = 1e7; i > 0; --i) {
      str = str.concat(concatMe);
    }
    e = performance.now();
    console.log(e - s);
    console.log('str = str.concat(): ' + str);
  }

  'Done';
}

Answer 2

Dengan ES6, anda boleh menggunakan

• Rentetan templat:

  var username = 'craig';
  console.log(`hello ${username}`);

ES5 dan versi ke bawah:

• Gunakan +operator

  var username = 'craig';
  var joined = 'hello ' + username;

• rentetan concat (..)

  var username = 'craig';
  var joined = 'hello '.concat(username);

Atau, gunakan kaedah tatasusunan:

• join( ..):

  var username = 'craig';
  var joined = ['hello', username].join(' ');

• Atau lebih eksotik, < code>kurangkan(..) digabungkan dengan mana-mana di atas:

  var a = ['hello', 'world', 'and', 'the', 'milky', 'way'];
  var b = a.reduce(function(pre, next) {
    return pre + ' ' + next;
  });
  console.log(b); // hello world and the milky way