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

Question

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

加 ( + ) 运算符;

str1 + str2;

字符串 concat() 方法;

str1.concat(str2);

另外，写在w3schools;

But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.

那么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

根据功能没有区别，但“+”运算符在性能方面比 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 2

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

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

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

ECMAScript规范in the ECMAScript spec for +明确表示，如果左操作数（lprim）的原始值是一个字符串，那么return就是拼接结果的字符串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;

这是我所知道的唯一一次您可能 want/need 显式字符串对象的例子：

// 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 3

两者基本相同，但 + 更清晰，速度肯定更快。

看看this performance test and also see this

It is strongly recommended that assignment operators (+, +=) are used instead of the concat() method.

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

What is the difference of + operator and concat() method in JavaScript

javascript

string

performance

concat

string-concatenation