How to (and how not to) concatenate strings in Javascript

Javascript has many ways to concatenate strings, and while the standard method provided is useful much of the time, it’s good to be aware of the other methods that exist. In this article, I’ll be talking about the three most prominent ways to concatenate strings, which is best, and why.

First off, I hope you’re not using String.concat

String.concat(strToConcat);

Some programmers will tell you that this method was added to Javascript solely for the purpose of making it more syntactically similar to Java. However, this is not true, although String.concat() is perhaps the least optimal way of concatenating strings in Javascript. It was purposely created to be a very generic method and for this general-ness, this method pays in efficiency, making it an undesirable option for most string concatenation operations. In fact, I’m only mentioning it here for completeness and to warn you away from it.

Too long, didn’t read:

This method is slow, so it’s probably best to avoid it altogether.

Plan A for string concatenation: using the + operator

string1 + string2

If you ask a Javascript programmer how to concatenate a string, this is likely the method he’ll respond with. It simply uses the + operator to concatenate the right operand with the left operand. This method used to be fairly slow, but has recently been optimized enough to make it Plan A for most Javascript programmers, expert and novice alike. It’s short, sweet, and to the point; however, if you’re likely to be doing lots of string operation (we’re talking thousands of operations here) then you’ll probably want to go to Plan B.

Too long, didn’t read:

This is a great method unless doing lots of string operations, in which case refer to Plan B.

Plan B for string concatenation and what arrays have to do with it:

[string1, string2].join(“”);

If you create an array of the strings you want to concatenate and call join(“”) on it, the effect will be the same as using the + operator. However, this code runs rather faster than using the + operator on two strings because native Array methods are often faster than native String methods. Here’s some sample code because Plan B is special (and because it’s my personal favorite, because it’s just so darn clever):

https://gist.github.com/2530153

As I mentioned before, of course, this can be summed up succinctly with this code:

https://gist.github.com/2530274

Too long; didn’t read:

This method is good for concatenating large amounts of strings because it’s faster than Plan A, but it’s ugly so I don’t bother using it everywhere.

Plan C: Basically what you should do

I use a combination of Plans A and B when writing my Javascript code. If I know that I’ll be doing lots and lots of string concatenation, I’ll use array.join(). Otherwise, I use the + operator as it’s short, sweet, and as of recently, optimized enough for use on a day-to-day basis. Oh, and I completely ignore String.concat(). :)