JavaScript String concat Example

Use the concat method to combine strings. Apply the plus operator on strings.

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.Strings

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().
JavaScript program that uses plus, concat on strings 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 + "; "); Output 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.
Concat: We can pass two strings as arguments to concat(). This is the same thing as using two plus signs to concatenate 3 strings.
JavaScript program that combines three 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 + "; "); Output 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.
Program 1: This program uses string concat to create many large strings with a single character repeated in them.
Program 2: 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.
JavaScript program that benchmarks string concat 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); JavaScript program that benchmarks array push 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); Output 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.

© 2007-2020 Sam Allen. Every person is special and unique. Send bug reports to info@dotnetperls.com.