views:

10942

answers:

10

Hi,

On my team, we usually do string concatentation like this:

var url = // some dynamically generated URL
var sb = new StringBuffer();
sb.append("<a href='").append(url).append("'>click here</a>");

Obviously the following is much more readable:

var url = // some dynamically generated URL
var sb = "<a href='" + url + "'>click here</a>";

But the JS experts claim that the "+" operator is less performant than StringBuffer.append(). Is this really true?

Cheers, Don

+11  A: 

Yes it's true but you shouldn't care. Go with the one that's easier to read. If you have to benchmark your app, then focus on the bottlenecks.

I would guess that string concatenation isn't going to be your bottleneck.

Michael Haren
+7  A: 

Try this:

var s = ["<a href='", url, "'>click here</a>"].join("");
Rahul
Well, the post you linked to in your answer specifically tries to disprove the "myth" of Array.join which my answer suggests. So perhaps not. I merely posted what I've seen to be faster in practice.
Rahul
+5  A: 

JavaScript doesn't have a native StringBuffer object, so I'm assuming this is from a library you are using, or a feature of an unusual host environment (i.e. not a browser).

I doubt a library (written in JS) would produce anything faster, although a native StringBuffer object might. The definitive answer can be found with a profiler (if you are running in a browser then Firebug will provide you with a profiler for the JS engine found in Firefox).

David Dorward
+3  A: 

In the words of Knuth, "premature optimization is the root of all evil!" The small defference either way will most likely not have much of an effect in the end; I'd choose the more readable one.

William Keller
A: 

Yes, according to the usual benchmarks. E.G : http://mckoss.com/jscript/SpeedTrial.htm.

But for the small strings, this is irrelevant. You will only care about performances on very large strings. What's more, in most JS script, the bottle neck is rarely on the string manipulations since there is not enough of it.

You'd better watch the DOM manipulation.

e-satis
+28  A: 
spoon16
Regarding the graph, in case it's not obvious; lower is better.
Helgi Hrafn Gunnarsson
+3  A: 

Agreed with Michael Haren.

Also consider the use of arrays and join if performance is indeed an issue.

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));
Frank Krueger
I know that a correct answer has been selected, but this answer has a more useful example.
Jason Sperske
A: 

As far I know, every concatenation implies a memory reallocation. So the problem is not the operator used to do it, the solution is to reduce the number of concatenations. For example do the concatenations outside of the iteration structures when you can.

David Ameller
This isn't actually bad advice, I don't know why it's voted down so much. I know it doesn't answer the specific question, but it deserves recognition as being generally good advice.
eyelidlessness
A: 

Like already some users have noted: This is irrelevant for small strings.

And new JavaScript engines in Firefox, Safari or Google Chrome optimize so

"<a href='" + url + "'>click here</a>";

is as fast as

["<a href='", url, "'>click here</a>"].join("");
amix
+1  A: 

Internet Explorer is the only browser which really suffers from this in today's world. (Versions 5 & 6 were dog slow. Haven't checked 7 & 8 for this.) What's more, IE gets slower and slower the longer your string is.

If you have long strings to concatenate then definitely use an array.join technique. (Or some StringBuffer wrapper around this, for readability.) But if your strings are short don't bother.

pcorcoran