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

Posted 2023-02-24

【中文标题】JavaScript 中 + 运算符和 concat() 方法有啥区别

【英文标题】：What is the difference of + operator and concat() method in JavaScriptJavaScript 中 + 运算符和 concat() 方法有什么区别

【发布时间】：2016-03-31 16:00:08

【问题描述】：

加号 (+) 运算符 和 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>

【问题讨论】：

这个问题是关于javascript，而不是java！其次，它不仅与操作符与 concat() 有关，还与 javascript 中的原语和对象的行为有关。引用的问题不是这个的重复。应该重新打开！

查看 ES5 §15.5.4.6 concat 并与 §11.6.1 addition operator 进行比较；主要区别是您可以在 non-Strings 上调用 .concat 并假设结果是 String String.prototype.concat.call(1, 2); // "12" vs 1 + 2; // 3

@PeeHaa 哎呀，对不起。

【参考方案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>");

【讨论】：

所以说 String.concat() 和 '+' 运算符完全相等和相同是否有效，是否可以说它们以相同的方式处理并具有相同的性能JavaScript 中基元和对象的场景？我还是很好奇。

@LeventDivilioglu - + 和 .concat() 提供完全相同的结果。至于性能问题，您必须在多个浏览器中运行一些性能测量测试才能回答这个问题，因为这可能取决于实现。没有概念上的理由为什么一个必须比另一个更快或更慢。

@LeventDivilioglu - 在我的回答中添加了性能数据和图表。

您使用String 的原因有什么特别之处吗？两个测试都不应该使用带引号的字符串或对象吗？

@KevinBrown - 我刚刚选择了 OP 的 example1 和 example4 进行比较，因为 OP 似乎在询问 String 对象与原语以及方法与运算符。

【参考方案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

【讨论】：

我没有，我已经为您关于 + 运算符性能优势的陈述投了赞成票，因为它很有用。

要求每个人都为反对票的原因发表评论，以便我了解我的错误。还有@LeventDivilioglu，谢谢

没有投反对票，但是对声明的链接或引用会很好。

@xbonez，我会处理的。感谢您的宝贵建议。

这个答案似乎只是一个评论，因为没有给出解释或参考。

【参考方案3】：

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

看看this performance test，也看看this

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

【讨论】：

性能测试是一个断开的链接。我看到了这个回复，"statusCode":500,"error":"Internal Server Error","message":"An internal server error occurred"