Concat. Two strings (or more) can be combined into a single string. This is called concatenation. In JavaScript we use the plus operator or the concat method.
For performance, modern browsers handle concatenation in complex ways. They use "ropes" to avoid copying characters. There is no "string builder" type in JavaScript.
First example. Here we see two strings—left and right. We combine them with the plus operator. And then we test the concat method. The syntax for concat() is somewhat more complex.
Tip For concat, we call the method on a string. One or more arguments can be passed to concat().
var left = "cat and ";
var right = "bird";
// Use plus to concatenate strings.
var plusResult = left + right;
document.write(plusResult + "; ");
// Use concat method.
var concatResult = left.concat(right);
document.write(concatResult + "; ");cat and bird; cat and bird;
Three strings. The plus operator and the concat method can handle more than two strings at once. We can combine 3 or more strings—here we combine 3 strings.
Detail We can pass two strings as arguments to concat(). This is the same thing as using two plus signs to concatenate 3 strings.
var one = "a";
var two = "b";
var three = "c";
// Concat 3 strings at once.
var all = one + two + three;
var allConcat = one.concat(two, three);
// Write results.
document.write(all + "; ");
document.write(allConcat + "; ");abc; abc;
Benchmark. String concatenation is fast in Google Chrome, but how does it compare to using an array? Here we compare similar programs that use concat and push.
Start This program uses string concat to create many large strings with a single character repeated in them.
Next This program calls push() on an array to build up a buffer of 1 character repeated 10000 times.
Result The array is faster. If an array can be used instead of concat(), this is likely a performance gain.
var x1 = performance.now();
// Append data to a string with concat.
for (var v = 0; v < 1000; v++) {
var letters = "";
for (var i = 0; i < 10000; i++) {
letters += "a";
}
}
var x2 = performance.now();
document.title = (x2 - x1);var x1 = performance.now();
// Append data to an array with push.
for (var v = 0; v < 1000; v++) {
var letters = [];
for (var i = 0; i < 10000; i++) {
letters.push("a");
}
}
var x2 = performance.now();
document.title = (x2 - x1);127.26 ms string concat
50.87 ms array push
An analysis. The plus sign and concat() are equivalent in JavaScript engines. Internally a rope optimization is used to avoid copying—this makes many concatenations or appends faster.
A review. String concatenation is a common task in JavaScript. With the powerful rope optimizations used, we can concatenate strings without too much performance loss.
Dot Net Perls is a collection of tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Feb 28, 2023 (edit).