JavaScript中如何建構/連接字串？

Question

JavaScript 支援替換/內插嗎？

概述

---

我正在開發一個 JavaScript 項目，隨著它變得越來越大，保持字串良好的狀態變得越來越困難。我想知道在 JavaScript 中建構或建構字串的最簡單和最傳統的方法是什麼。

到目前為止我的經驗：

隨著專案變得更加複雜，字串連接開始看起來很醜陋並且變得更難維護。

此時最重要的是簡潔性和可讀性，考慮一堆移動部件，而不僅僅是 2-3 個變數。

同樣重要的是，它目前已得到主要瀏覽器的支援（即至少支援 ES5）。

我知道 JavaScript 連結簡寫：

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

還有 String.concat 函數。

我正在尋找更簡潔的東西。

Ruby 和 Swift 以一種有趣的方式做到了這一點。

紅寶石

var x = 'Hello'
var y = 'world'
print "#{x}, #{y}"

斯威夫特

var x = "Hello"
var y = "world"
println("(x), (y)")

我想 JavaScript 中可能有類似的東西，也許類似 sprintf.js。

問題

---

可以在沒有第三方函式庫的情況下完成此操作嗎？如果沒有，我可以用什麼？

Answer 1

令我失望的是，其他答案中沒有人將「最佳方式」解釋為「最快方式」...

我從這裡提取了兩個範例，並添加了str。 join() 和 str.reduce() 來自上面 nishanths 的回答。以下是我在 Linux 上的 Firefox 77.0.1 上的結果。

---

注意：我在測試這些時發現，如果我將str = str.concat() 和str = 直接放在之前或之後彼此之間，第二個總是表現得更好一些...所以我單獨運行這些測試並評論其他測試的結果...

即使如此，如果我重新運行它們，它們的速度也會很大變化，所以我每個都測量了 3 次。

一次 1 個字元：

• 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 個字串：

• 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 字串

---

#所以，無論是一次附加1個字元還是一次附加26個字串：

• 明顯的獲勝者：基本上是 str = str.concat() 和 str = 之間的平手
• 明顯失敗者：[].reduce()，然後是 [].join()

---

我的程式碼，易於在瀏覽器控制台中運行：

{
  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

使用ES6，你可以使用

• 範本字串： p>

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

ES5 及以下版本：

• 使用 運算子

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

• 字串的 concat (..)

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

或者，使用陣列方法：

• join( ..)：

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

• 或更奇特，reduce(..) 與上述任何一項組合：

  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