在 JavaScript 中执行字符串 building/concatenation 的最佳方法是什么？

Question

JavaScript支持substitution/interpolation吗？

概览

我正在做一个 JS 项目，随着它越来越大，保持字符串的良好状态变得越来越困难。我想知道在 JavaScript.

中构造或构建字符串的最简单和最传统的方法是什么

我目前的经验：

String concatenation starts looking ugly and becomes harder to maintain as the project becomes more complex.

此时最重要的是简洁性和可读性，想想一堆移动的部分，而不仅仅是 2-3 个变量。

同样重要的是，从今天起，主流浏览器都支持它（即至少支持 ES5）。

我知道 JS 串联 shorthand:

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

以及 String.concat 函数。

我正在寻找更整洁的东西。

Ruby 和 Swift 以一种有趣的方式进行。

Ruby

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

Swift

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

我在想 JavaScript 中可能会有类似的东西，也许类似于 sprintf.js。

问题

没有第三方库能做到吗？如果没有，我可以使用什么？

Answer 1

您可以使用 concat 函数。

var hello = "Hello ";
var world = "world!";
var res = hello.concat(world);

Answer 2

var descriptor = 'awesome';
console.log(`ES6 is ${descriptor}!`);

更多：https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en

Answer 3

你可以使用 Coffeescript，它是为了让 javascript 代码更简洁。对于字符串连接，你可以这样做：

first_name = "Marty"
full_name = "#{first_name} McFly"
console.log full_name

也许你可以开始 here 看看 coffescript 提供了什么..

Answer 4

使用 ES6，你可以使用

Template strings:

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

Answer 5

我认为 replace() 在这里值得一提。

在某些情况下，替换方法在构建字符串时可以很好地为您服务。具体来说，很明显，当您将动态部分注入其他静态字符串时。示例：

var s = 'I am {0} today!';
var result = s.replace('{0}', 'hungry');
// result: 'I am hungry today!'

要替换的占位符显然可以是任何东西。我出于 C# 的习惯使用“{0}”、“{1}”等。它只需要足够独特，不会出现在预期之外的字符串中。

因此，只要我们可以 fiddle 稍微处理一下字符串部分，OP 示例也可以这样解决：

var x = 'Hello {0}';
var y = 'World';
var result = x.replace('{0}', y);
// result: 'Hello World'. -Oh the magic of computing!

参考 "replace"： https://www.w3schools.com/jsreF/jsref_replace.asp

Answer 6

令我失望的是，其他答案中没有人将“最佳方式”解释为“最快方式”...

我从上面的 here and added str.join() and str.reduce() from 中提取了 2 个示例。这是我在 Linux.

上使用 Firefox 77.0.1 的结果

注意： 我在测试这些时发现，如果我将 str = str.concat() 和 str += 直接放在彼此之前或之后，第二个总是执行好多了...所以我运行单独进行这些测试，并对其他测试结果进行评论...

即使仍然，如果我重新运行它们，它们的速度变化广泛，所以我为每个测量了 3 次.

一次 1 个字符：

str = str.concat(): 841, 439, 956 ms / 1e7 concat()'s
............str +=: 949, 1130, 664 ms / 1e7 +='s
.........[].join(): 3350, 2911, 3522 ms / 1e7 characters in []
.......[].reduce(): 3954, 4228, 4547 ms / 1e7 characters in []

一次26个字符串：

str = str.concat(): 444, 744, 479 ms / 1e7 concat()'s
............str +=: 1037, 473, 875 ms / 1e7 +='s
.........[].join(): 2693, 3394, 3457 ms / 1e7 strings in []
.......[].reduce(): 2782, 2770, 4520 ms / 1e7 strings in []

因此，无论是一次追加 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 7

**Top 3 Practical Ways to Perform Javascript String Concatenation**

1) Using the concat() method

let list = ['JavaScript',' ', 'String',' ', 'Concatenation'];
let result = ''.concat(...list);

console.log(result);

Output:
JavaScript String Concatenation

2) Using the + and += operators

    enter code here

The operator + allows you to concatenate two strings. 
For example:
let lang = 'JavaScript';
let result = lang + ' String';


console.log(result);
Output: JavaScript String


3) Using template literals`enter code here`

ES6 introduces the template literals that allow you to perform string interpolation.
The following example shows how to concatenate three strings:

let navbarClass = 'navbar';
let primaryColor = 'primary-color';
let stickyClass = 'sticky-bar';

let className = `${navbarClass} ${primaryColor} ${stickyClass}`;

console.log(className);

Output: navbar primary-color stickyBar

在 JavaScript 中执行字符串 building/concatenation 的最佳方法是什么？

What's the best way to do string building/concatenation in JavaScript?

javascript

string

concatenation

conventions

概览

问题