Black lives matter
Portrait Dr. Axel Rauschmayer
Dr. Axel Rauschmayer
Homepage | Twitter
Cover of book “JavaScript for impatient programmers”
Book, exercises, quizzes
(free to read online)
Cover of book “Deep JavaScript”
Book (50% free online)
Cover of book “Tackling TypeScript”
Book (first part free online)
Logo of newsletter “ES.next news”
Newsletter (free)

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.