Does JavaScript have a built in stringbuilder class?

Question

But is there a regular implementation in JavaScript?

Read http://blog.codeeffects.com/Article/String-Builder-In-Java-Script. — Kizz, Jan 24 '13 at 21:25

Fabian Jakobs · Accepted Answer · 2010-01-18T16:56:14.543

339

If you have to write code for Internet Explorer make sure you chose an implementation, which uses array joins. Concatenating strings with the + or += operator are extremely slow on IE. This is especially true for IE6. On modern browsers += is usually just as fast as array joins.

When I have to do lots of string concatenations I usually fill an array and don't use a string builder class:

var html = [];
html.push(
  "<html>",
  "<body>",
  "bla bla bla",
  "</body>",
  "</html>"
);
return html.join("");

Note that the push methods accepts multiple arguments.

edited Jan 18 '10 at 16:56

answered Jan 18 '10 at 16:42

Fabian Jakobs

27,222
7
38
37

7

And if you're generating output inline, or all members are literals, `[foo(), "bar", "baz"].join("");` works, too. – Anonymous Jan 19 '10 at 07:26
1

While one probably cannot expect dropbox links to stay working for almost 3 years, I'd be curious about the comparison -- and if it still holds up. – Cornelius Nov 16 '12 at 13:58
1

@DaveWard, your link is broken :( – Ivan Kochurkin Feb 28 '13 at 12:05
I find this to be a lot more readable that string + string + string – Andrew Ehrlich Mar 03 '14 at 18:57
17

I didn't know `push` could accept multiple arguments. The random things you learn. – Carcigenicate Mar 16 '16 at 22:33
Note that IE here means IE 7 and earlier. In IE 8+ concatenation isn't any worse than other browsers. – Sam Hanes Feb 07 '19 at 21:43

Andreas · Answer 2 · 2015-01-08T13:03:52.590

59

I just rechecked the performance on http://jsperf.com/javascript-concat-vs-join/2. The test-cases concatenate or join the alphabet 1,000 times.

In current browsers (FF, Opera, IE11, Chrome), "concat" is about 4-10 times faster than "join".

In IE8, both return about equal results.

In IE7, "join" is about 100 times faster unfortunately.

edited Jan 08 '15 at 13:03

answered Nov 25 '14 at 12:08

Andreas

1,733
17
33

3

Thanks for this. This should be bumped up in the answer list. It's also a lot faster on IE10 as well (I know that's not a modern browser but I mention it for any potential NMCI developers seeing this). – James Wilson Mar 05 '15 at 20:39
@Andreas I believe your test is hitting a code path in Chrome where it's never doing the actual concatenate because the string is never read. Even when forcing that, though, the execution speed is still considerably faster: https://jsperf.com/yet-another-string-concat-test/1 – Joseph Lennox Mar 22 '18 at 21:31
RIP jsperf. I made a jsbench that confirms the same results, at least in my browser (Safari 14): https://jsben.ch/SrMoI – Han Seoul-Oh May 22 '21 at 00:04

score 39 · Answer 3 · edited Jun 20 '20 at 09:12

No, there is no built-in support for building strings. You have to use concatenation instead.

You can, of course, make an array of different parts of your string and then call join() on that array, but it then depends on how the join is implemented in the JavaScript interpreter you are using.

I made an experiment to compare the speed of str1+str2 method versus array.push(str1, str2).join() method. The code was simple:

var iIterations =800000;
var d1 = (new Date()).valueOf();
str1 = "";
for (var i = 0; i<iIterations; i++)
    str1 = str1 + Math.random().toString();
var d2 = (new Date()).valueOf();
log("Time (strings): " + (d2-d1));

var d3 = (new Date()).valueOf();
arr1 = [];
for (var i = 0; i<iIterations; i++)
    arr1.push(Math.random().toString());
var str2 = arr1.join("");
var d4 = (new Date()).valueOf();
log("Time (arrays): " + (d4-d3));

I tested it in Internet Explorer 8 and Firefox 3.5.5, both on a Windows 7 x64.

In the beginning I tested on small number of iterations (some hundred, some thousand items). The results were unpredictable (sometimes string concatenation took 0 milliseconds, sometimes it took 16 milliseconds, the same for array joining).

When I increased the count to 50,000, the results were different in different browsers - in Internet Explorer the string concatenation was faster (94 milliseconds) and join was slower(125 milliseconds), while in Firefox the array join was faster (113 milliseconds) than string joining (117 milliseconds).

Then I increased the count to 500'000. Now the array.join() was slower than string concatenation in both browsers: string concatenation was 937 ms in Internet Explorer, 1155 ms in Firefox, array join 1265 in Internet Explorer, and 1207 ms in Firefox.

The maximum iteration count I could test in Internet Explorer without having "the script is taking too long to execute" was 850,000. Then Internet Explorer was 1593 for string concatenation and 2046 for array join, and Firefox had 2101 for string concatenation and 2249 for array join.

Results - if the number of iterations is small, you can try to use array.join(), as it might be faster in Firefox. When the number increases, the string1+string2 method is faster.

UPDATE

I performed the test on Internet Explorer 6 (Windows XP). The process stopped to respond immediately and never ended, if I tried the test on more than 100,000 iterations. On 40,000 iterations the results were

Time (strings): 59175 ms
Time (arrays): 220 ms

This means - if you need to support Internet Explorer 6, choose array.join() which is way faster than string concatenation.

`join()` is part of ECMAScript and afaik every JavaScript interpreter implements it. Why would it "depend"? — Eli Grey, Jan 18 '10 at 16:45
he meant HOW it was implemented... if it's implemented in a way that, in a loop, the string is continually appended opposed to created all at once, then using join would be pointless — John, Jan 18 '10 at 16:49
Yes, it was what I actually meant. Pardon my English ;-) I added results of a comparison how fast which method works in two browsers. You can see, it is different. — naivists, Jan 19 '10 at 07:33
People with IE6 are used to having everything really slow though. I don't think they'll blame you. — Lodewijk, Jan 09 '12 at 01:24

score 8 · Answer 4 · answered Jan 18 '10 at 16:43

8

That code looks like the route you want to take with a few changes.

You'll want to change the append method to look like this. I've changed it to accept the number 0, and to make it return this so you can chain your appends.

StringBuilder.prototype.append = function (value) {
    if (value || value === 0) {
        this.strings.push(value);
    }
    return this;
}

answered Jan 18 '10 at 16:43

Gordon Tucker

6,156
3
25
39

Why only accept non-NaN numbers and non-empty strings? Your method won't accept `null`, `false`, empty strings, `undefined`, or `NaN`. – Eli Grey Jan 18 '10 at 16:48
@Elijah - I prefer to keep my StringBuilder class clean by not accepting anything but valid strings and numbers. It is just a personal preference. – Gordon Tucker Jan 18 '10 at 21:14

Theophilus · Answer 5 · 2018-02-15T01:35:04.360

6

The ECMAScript 6 version (aka ECMAScript 2015) of JavaScript introduced string literals.

var classType = "stringbuilder";
var q = `Does JavaScript have a built-in ${classType} class?`;

Notice that back-ticks, instead of single quotes, enclose the string.

edited Feb 15 '18 at 01:35

answered Feb 02 '18 at 15:34

Theophilus

899
10
17

25

How does this answer the question? – Peter Mortensen Feb 14 '18 at 19:04
@Peter Mortensen, this answer merely gives another way to build a string. The original poster didn't specify what type of string builder functionality was being sought. – Theophilus Feb 15 '18 at 01:46
2

This does not answer the question. At all. – Massimiliano Kraus Sep 02 '19 at 19:37
2

I also don't think it answers the question but some comments are really not helpful or welcoming to other members. At all. – Fabio Milheiro Aug 18 '20 at 10:10

TotPeRo · Answer 6 · 2018-06-13T21:10:09.213

3

I have defined this function:

function format() {
        var args = arguments;
        if (args.length <= 1) { 
            return args;
        }
        var result = args[0];
        for (var i = 1; i < args.length; i++) {
            result = result.replace(new RegExp("\\{" + (i - 1) + "\\}", "g"), args[i]);
        }
        return result;
    }

And can be called like c#:

 var text = format("hello {0}, your age is {1}.",  "John",  29);

Result:

hello John, your age is 29.

edited Jun 13 '18 at 21:10

answered Jun 06 '18 at 19:50

TotPeRo

6,065
3
39
55

2

I like that...looks like c# – Ayo Adesina Jun 13 '18 at 09:26
3

This answer has nothing to do with the question. – Massimiliano Kraus Sep 02 '19 at 19:36

score 2 · Answer 7 · answered Jun 07 '17 at 17:30

2

In C# you can do something like

 String.Format("hello {0}, your age is {1}.",  "John",  29)

In JavaScript you could do something like

 var x = "hello {0}, your age is {1}";
 x = x.replace(/\{0\}/g, "John");
 x = x.replace(/\{1\}/g, 29);

answered Jun 07 '17 at 17:30

sports

6,889
11
61
121

2

I highly doubt running a regular expression in place of a string join will be more performant – tic Jul 27 '18 at 21:09
Furthermore, this is an awful implementation. It will break if the string with which `{0}` is replaced contains `{1}`. – ikegami Sep 23 '18 at 18:40
@ikegami the string is not a variable, is a constant, so you know whats contained a priori. – sports Sep 24 '18 at 15:41
@sports, Copying and pasting all of that throughout your code is an even worse idea. – ikegami Sep 24 '18 at 16:30
One liner with $1 and $2 replacing the non-capture groups: x..replace(/([\s\S]*?)\{0\}([\s\S]*?)\{1\}/g, "$1Tom$225") – T.CK Mar 11 '19 at 13:07
2

This does not answer the question. A StringBuilder class is not for string interpolation. – Massimiliano Kraus Sep 02 '19 at 19:38

Aaron · Answer 8 · 2014-04-01T01:54:40.723

1

For those interested, here's an alternative to invoking Array.join:

var arrayOfStrings = ['foo', 'bar'];
var result = String.concat.apply(null, arrayOfStrings);
console.log(result);

The output, as expected, is the string 'foobar'. In Firefox, this approach outperforms Array.join but is outperformed by + concatenation. Since String.concat requires each segment to be specified as a separate argument, the caller is limited by any argument count limit imposed by the executing JavaScript engine. Take a look at the documentation of Function.prototype.apply() for more information.

edited Apr 01 '14 at 01:54

answered Mar 31 '14 at 22:21

Aaron

11
2

This fails in Chrome, since "String.concat" is undefined. Instead, you could use ''.concat.apply('', arrayOfStrings). But this is still a very slow method. – Andreas Jan 08 '15 at 13:12

score 0 · Answer 9 · answered Jan 12 '16 at 12:45

0

When I find myself doing a lot of string concatenation in JavaScript, I start looking for templating. Handlebars.js works quite well keeping the HTML and JavaScript more readable. http://handlebarsjs.com

answered Jan 12 '16 at 12:45

beginning

1,457
1
16
26

score 0 · Answer 10 · answered May 29 '17 at 08:17

0

How about sys.StringBuilder() try the following article.

https://msdn.microsoft.com/en-us/library/bb310852.aspx

answered May 29 '17 at 08:17

Pissu Pusa

864
2
13
24

Does JavaScript have a built in stringbuilder class?

10 Answers10

UPDATE

Linked

Related