Click here to Skip to main content
Click here to Skip to main content

JavaScript StringBuilder

, 6 Dec 2005
Rate this:
Please Sign up or sign in to vote.
An extremely simple, light-weight JavaScript StringBuilder class. Hundreds of times faster than string concatenation in IE.

Introduction

Once upon a time, not so long ago, pushing any significant processing to the client browser was considered a bad practice. Now with the rise in popularity of AJAX style development, it has suddenly become a hot new technology. Unfortunately, the most commonly used browser on the market is painfully slow at one of the most common tasks in programming -- string concatenation.

The good news is that although IE is slow when it comes to string concatenation, it is quite fast with array operations. With this in mind, I decided to write a simple StringBuilder class that pushes individual strings into an array and then uses the join method to produce the concatenated output string. In tests I have run with 5,000 strings, it is 117 times faster than the equivalent string concatenation using the s1 += s2 syntax. With 10,000 strings, it is an amazing 261 times faster!

Using the code

The StringBuilder class only provides four methods: a constructor, an append method, a clear method, and a toString method. You can add more properties and methods if you need them, but I chose to keep it as simple as possible for this article.

Here is the entire script that defines the StringBuilder class:

// Initializes a new instance of the StringBuilder class
// and appends the given value if supplied
function StringBuilder(value)
{
    this.strings = new Array("");
    this.append(value);
}

// Appends the given value to the end of this instance.
StringBuilder.prototype.append = function (value)
{
    if (value)
    {
        this.strings.push(value);
    }
}

// Clears the string buffer
StringBuilder.prototype.clear = function ()
{
    this.strings.length = 1;
}

// Converts this instance to a String.
StringBuilder.prototype.toString = function ()
{
    return this.strings.join("");
}

The code is so simple and straightforward that it should be self-explanatory. Now here's an example of how to use it:

// create a StringBuilder
var sb = new StringBuilder();

// append some text
sb.append("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ");
sb.append("sed diem nonummy nibh euismod tincidunt ut lacreet dolore ");
sb.append("magna aliguam erat volutpat.");

// get the full string value
var s = sb.toString();

Again, so simple and straightforward it shouldn't require any further explanation. If you've ever used the StringBuilder in .NET, then you already know how to use this one.

If you download the demo project, you will find an HTML page that performs a side-by-side comparison of StringBuilder vs. string concatenation. You can use it to run your own tests to see the difference for yourself. On my machine, it takes IE over 14 seconds to concatenate 5,000 strings. The StringBuilder does it in 110 ms. With 10,000 strings, it takes IE a full minute to concatenate. The StringBuilder does it in 230 ms. More than a minute to less than a quarter of a second, that's a fairly significant improvement!

Conclusion

The whole purpose of pushing processing to the client is to provide a richer, more responsive user experience. That means, it's important to make sure the client-side code is as efficient as possible. I hope this article helps your client-side string building code really scream.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

K.Collins
Architect Epsilon
United States United States
IT professional with fifteen years experience designing and building software and web applications for local, national, and global organizations in a variety of industries including telecommunications, insurance, accounting, finance, not-for-profit, marketing, payment services, loyalty services, e-commerce, and e-business.

Comments and Discussions

 
QuestionThread Safety Issue Pinmembercarnegiea20-Aug-13 21:11 
GeneralNot working in FireFox, Chrome and Safari, and runs slower on IE and Opera Pinmemberynnorj2-Dec-09 18:05 
GeneralRe: Not working in FireFox, Chrome and Safari, and runs slower on IE and Opera PinmemberErikerikerikerikerassa2-Jan-10 13:30 
GeneralRe: Not working in FireFox, Chrome and Safari, and runs slower on IE and Opera PingroupKikoz6814-Jul-11 10:11 
QuestionStringBuilderPlus & Length = 1? Pinmemberaspdotnetdev7-Sep-09 21:32 
AnswerRe: StringBuilderPlus & Length = 1? PinmemberK.Collins8-Sep-09 5:38 
GeneralIt is amazing Pinmemberarijit00729-Jan-09 0:39 
GeneralRe: It is amazing PinmemberK.Collins29-Jan-09 5:04 
GeneralCode Update (by player's edited version) Pinmemberplayer.7-Oct-08 20:20 
GeneralRe: Code Update (by player's edited version) PinmemberK.Collins8-Oct-08 4:16 
GeneralRe: Code Update (by player's edited version) Pinmemberplayer.29-Jul-09 21:55 
GeneralGoogle Chrome results PinmemberIgor Glasner23-Sep-08 7:48 
GeneralRe: Google Chrome results PinmemberK.Collins8-Oct-08 4:09 
GeneralThank you. Pinmemberarockj11-Jun-08 13:36 
GeneralRe: Thank you. PinmemberK.Collins12-Jun-08 5:53 
GeneralEven Faster... PinmemberLTSpeed21-Jun-07 3:46 
GeneralThanks PinmemberSuperDuckZA_PS8-Apr-07 4:17 
GeneralRe: Thanks PinmemberK.Collins9-Apr-07 4:34 
GeneralVery Good idea, with a small change! PinmemberAjaxDino18-Jan-07 14:50 
GeneralRe: Very Good idea, with a small change! PinmemberK.Collins19-Jan-07 4:52 
QuestionDoesn't work in Firefox? Pinmemberjswoofer17-Sep-06 16:55 
AnswerRe: Doesn't work in Firefox? PinmemberAndrei Bozantan22-Sep-06 7:36 
QuestionIs it from Atlas? Pinmemberabakar12-Dec-05 17:32 
AnswerRe: Is it from Atlas? PinmemberK.Collins13-Dec-05 4:00 
GeneralRe: Is it from Atlas? Pinmemberabakar13-Dec-05 17:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 6 Dec 2005
Article Copyright 2005 by K.Collins
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid