I have some experience with Java and I know that strings concatenation with "+" operator produces new object.
I'd like to know how to do it in JS in the best way, what is the best practice for it?
5 Answers
MDN has the following to say about string.concat():
It is strongly recommended to use the string concatenation operators (+, +=) instead of this method for perfomance reasons
Also see the link by @Bergi.
2 Comments
Artur Müller Romanov
Could you elaborate on what makes the first method more performant?
laktak
@ArturMüllerRomanov You mean the string concatenation operators? It's because the JS engines put the most effort into optimizing for the common case.
In JS, "+" concatenation works by creating a new String object.
For example, with...
var s = "Hello";
...we have one object s.
Next:
s = s + " World";
Now, s is a new object.
2nd method: String.prototype.concat
Comments
There was a time when adding strings into an array and finalising the string by using join was the fastest/best method. These days browsers have highly optimised string routines and it is recommended that + and += methods are fastest/best
Comments
- We can't concatenate a string variable to an integer variable using
concat()function because this function only applies to a string, not on a integer. but we can concatenate a string to a number(integer) using + operator. - As we know, functions are pretty slower than operators. functions needs to pass values to the predefined functions and need to gather the results of the functions. which is slower than doing operations using operators because operators performs operations in-line but, functions used to jump to appropriate memory locations... So, As mentioned in previous answers the other difference is obviously the speed of operation.
<!DOCTYPE html>
<html>
<body>
<p>The concat() method joins two or more strings</p>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var text1 = 4;
var text2 = "World!";
document.getElementById("demo").innerHTML = text1 + text2;
//Below Line can't produce result
document.getElementById("demo1").innerHTML = text1.concat(text2);
</script>
<p><strong>The Concat() method can't concatenate a string with a integer </strong></p>
</body>
</html>
answered Jun 22, 2015 at 11:07
RevanthKrishnaKumar V.
1,9031 gold badge22 silver badges35 bronze badges
3 Comments
OliverRadini
The example appears to work for me though?
Bobdabear
@OliverRadini that would probably depend on the browser you're using. what you were actually seeing was the browser noticing .concat() being called on an object of type 'number' and since 'number' and 'string' are both built-in/base types the conversion is done. this is mentioned in the docs (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) stating "Because Number doesn't have a [@@toPrimitive]() method, JavaScript calls the toString() method automatically when a Number object is used in a context expecting a string"
OliverRadini
Interesting! It seems that
.concat is strictly superior, given the other answers. You mention that concat is potentially inconsistent across browsers. I'm wondering how this would happen - if they implemented toString differently?You can try with this code (Same case)
chaine1 + chaine2;
I suggest you also (I prefer this) the string.concat method
2 Comments
Bergi
You should rather link to English references such as developer.mozilla.org/en-US/docs/JavaScript/Reference/…
Arjan
Given chris's and Xotic's answer: why would you prefer
concat?
+andconcat(). There are differences other than performance, for exampleconcat()works better with nullable strings (null + "Hello"gives"nullHello"whereasnull?.concat("Hello")gives undefined).