JavaScript 中 + 运算符和 concat() 方法有什么区别

Question

加号 (+) 运算符 和 String.concat() 方法给出相同的结果。

加号（+）运算符;

str1 + str2;

字符串 concat() 方法;

str1.concat(str2);

另外，写在w3schools;

但是对于 JavaScript，方法和属性也可用于 原始值，因为 JavaScript 将原始值视为 执行方法和属性时的对象。

那么对于我们在基元上使用还是在JS中的String对象上使用哪种方式更好地组合，它们之间的性能优势和劣势是什么？

var firstName = "John"      // String
var y = new String("John"); // with String Object

以下是给出相同结果的示例代码；

function example1 () {
  var str1 = "Hello ";
  var str2 = "World!";
  document.getElementById("demo1").innerHTML += str1 + str2;
}


function example2 () {
  var str1 = "Hello ";
  var str2 = "World!";
  document.getElementById("demo2").innerHTML += str1.concat(str2);
}

function example3 () {
  var str1 = String("Hello ");
  var str2 = String("World!");
  document.getElementById("demo3").innerHTML += str1 + str2;
}

function example4 () {
  var str1 = String("Hello ");
  var str2 = String("World!");
  document.getElementById("demo4").innerHTML += str1.concat(str2);
}

example1();
example2();
example3();
example4();

<p id="demo1">Demo 1: </p>
<p id="demo2">Demo 2: </p>
<p id="demo3">Demo 3: </p>
<p id="demo4">Demo 4: </p>

Answer 1

原语上的字符串方法和对象上的字符串方法在行为上没有区别。

性能存在很大差异，因为 this jsperf 中的原始版本似乎要快得多（可能快 100 倍），这可能是由于解释器优化所致。

从this jsperf 可以看出，性能上的主要差异是由var str1 = new String("Hello "); 而不是var str1 = "Hello "; 引起的。 + 运算符与 concat() 根本没有太大区别。我的猜测是这是因为 JS 解释器正在优化字符串方法。但是，创建一个实际的字符串对象并没有那么优化或高效。

对于 ECMAScript 规范 in the ECMAScript spec for +，它明确规定如果左操作数 (lprim) 的原始值是一个字符串，则返回作为连接 ToString(lprim) followed by ToString(rprim) 的结果的字符串。

在ECMAScript spec for String.prototype.concat() 中，它说：Let R be the String value consisting of the characters in the previous value of R followed by the characters of ToString(next).

这个措辞意味着+在将左操作数作为字符串给出时会将右操作数转换为字符串并在内部调用.concat()，这正是.concat()所做的。

很明显，如果左操作数不是字符串，那么 + 会得到不同的行为，因为它根本不会将其视为字符串操作。

---

如果你想给一个字符串对象添加一个自定义属性，那么你需要的是对象形式，而不是原始形式。

至于何时使用+，何时使用.concat()，这是个人编码风格的选择。两者都达到相同的结果。我个人更喜欢尽可能使用运算符，因为代码看起来更易于阅读。

除非你有特定的理由要创建一个字符串对象，否则你通常应该只使用原语。

所以，真的没有理由这样做：

var str1 = String("Hello ");
var str2 = String("World!");
document.getElementById("demo").innerHTML = str1.concat(str2);

当这工作正常时：

var str1 = "Hello ";
var str2 = "World!";
document.getElementById("demo").innerHTML = str1 + str2;

---

这是我知道的唯一一次你可能想要/需要显式字符串对象的示例：

// actual string object will retain custom property
var str1 = new String("Hello");
str1.customProp = "foo";
log(str1.customProp);

// string primitive will not retain custom property
var str2 = "Hello";
str2.customProp = "foo";
log(str2.customProp);

function log(x) {
    document.write(x + "<br>");
}

Answer 2

根据功能没有区别，但 '+' 运算符比 concat() 性能更快。

var str1="hello";
var str2="world";
var str3;
var start = new Date().getTime();
for (i = 0; i < 100000; ++i) {
str3=str1+str2;
}
var end = new Date().getTime();
var time = end - start;

print('Execution time using + operator: ' + time);

// USING CONCAT OPERATOR

start = new Date().getTime();
for (i = 0; i < 100000; ++i) {
str3=str1.concat(str2);
}
end = new Date().getTime();
time = end - start;
print('Execution time using CONCAT operator: ' + time);

please run at ideone

Answer 3

几乎相同，但+ 更清晰，而且肯定更快。

看看this performance test，也看看this

强烈建议使用赋值运算符（+、+=）代替 concat() 方法。