JavaScript中的+运算符和concat（）方法有什么区别

Question

加号（+）运算符和String.concat()方法会产生相同的结果。

加（+）运算符;

str1 + str2;

String 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()所做的。 / p>

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

无论你是否有字符串对象或字符串原语，它都可以产生影响的情况是，如果你想将自定义属性添加到字符串对象，那么你需要对象表单，而不是原始表单。

至于何时使用+以及何时使用.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

有很多相同但+更清晰，肯定更快。

查看this performance test并查看this

  

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

Answer 3

根据功能没有区别但是＆＃39; +＆＃39;运算符比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