Wie erstellt/verkettet man Strings in JavaScript?

Question

Unterstützt JavaScript Ersetzung/Interpolation?

Übersicht

---

Ich arbeite an einem JavaScript-Projekt und je größer es wird, desto schwieriger wird es, die Zeichenfolgen in gutem Zustand zu halten. Ich würde gerne wissen, wie man einen String in JavaScript am einfachsten und traditionellsten konstruieren oder erstellen kann.

Meine bisherigen Erfahrungen:

Je komplexer Projekte werden, desto hässlicher sieht die Zeichenfolgenverkettung aus und es wird schwieriger, sie beizubehalten.

Das Wichtigste an dieser Stelle ist Einfachheit und Lesbarkeit. Denken Sie an eine Reihe beweglicher Teile, nicht nur an zwei bis drei Variablen.

Ebenso wichtig ist, dass es derzeit von den wichtigsten Browsern (d. h. mindestens ES5) unterstützt wird.

Ich kenne die Abkürzung für JavaScript-Verbindungen:

var x = 'Hallo';
var y = 'Welt';
console.log(x + ', ' + y);

Es gibt auch die Funktion String.concat.

Ich suche etwas Saubereres.

Ruby und Swift tun dies auf interessante Weise.

Ruby

var x = 'Hallo'
var y = 'Welt'
print „#{x}, #{y}“

Swift

var x = "Hallo"
var y = „Welt“
println("(x), (y)")

Ich dachte, es könnte etwas Ähnliches in JavaScript geben, vielleicht so etwas wie sprintf.js.

Frage

---

Kann dies ohne eine Bibliothek eines Drittanbieters durchgeführt werden? Wenn nicht, was kann ich verwenden?

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，你可以使用

• 模板字符串：

  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(' ');

• 或者更奇特，< code>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