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

• 模板字符串：

  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