Portrait Dr. Axel Rauschmayer
Dr. Axel Rauschmayer
Homepage | Twitter
Cover of book “Exploring ES6”
Book, exercises, quizzes
(free to read online)
Logo of newsletter “ES.next news”
Newsletter (free)
Cover of book “JavaScript for impatient programmers”
Book (free online)

String concatenation in JavaScript

[2011-10-25] dev, javascript, jslang
(Ad, please don’t block)

There are two ways of doing string concatenation in JavaScript. This post demonstrates them and explains which one is faster.

+ operator

The + operator does string concatenation as soon as one of its operands is a string. Then the other operand is converted to string. Example:
> "Say hello " + 7 + " times fast!"
’Say hello 7 times fast!’
Alternatively, you can use += where
a += b
is an abbreviation for
a = a + b
Example:
> var str = "";
> str += "Say hello ";
’Say hello ’
> str += 7;
’Say hello 7’
> str += " times fast!";
’Say hello 7 times fast!’

Joining an array of strings

Collect the strings to be concatenated in an array and join it afterwards.
> var arr = [];
> arr.push("Say hello ");
1
> arr.push(7);
2
> arr.push(" times fast");
3
> arr.join("")
’Say hello 7 times fast’

Which one is faster?

Strings being immutable, most string operations whose results are strings produce new strings. Therefore languages such as C# or Java whose string handling is similar to JavaScript’s have special classes that help with concatenating strings. For example, C# calls this class StringBuilder. However, modern JavaScript engines optimize the + operator internally [1]. Tom Schuster mentions Ropes [2] as one possible technique for optimization. Hence there is no need for StringBuilder in JavaScript. Just use += and be done.

References

  1. Re: String concatenation” – email by Brendan Eich stating that + is faster on modern JavaScript engines.
  2. Ropes: an Alternative to Strings (1995)” by Hans-J. Boehm , Russ Atkinson , Michael Plass.