In a previous post, we recreated a simple version of Java’s StringBuilder:

var StringBuilder = function (str) {
    var _stack = str ? [str] : []; // str == initial string to start, if any
 
    // append can take one or more strings as arguments
    this.append = function () {
        _stack.push.apply(_stack, arguments);
        return this;
    }
 
    this.toString = function (separator) {
        return _stack.join(separator || '');
    }
}

Unlke Java’s implementation, we’ve added a separator parameter to the toString() method. This would be very helpful in creating HTML or CSV using our object.

I was thinking it would be fun to add a few more features of Java’s StringBuilder onto our decidedly simple example. Here’s how we could add a separator property and a length property (with setter and getter):
Continue reading →

Create your own version of Java’s StringBuilder:

var StringBuilder = function (str) {
    var _stack = str ? [str] : []; // str == initial string to start, if any
 
    // append can take one or more strings as arguments
    this.append = function () {
        _stack.push.apply(_stack, arguments);
        return this;
    }
 
    this.toString = function (separator) {
        return _stack.join(separator || '');
    }
}

This routine runs up to 8x faster in IE6 than normal string concatenation using the + and += operators! In IE7, I’ve clocked a 4x improvement.

Firefox 3.0 gets about a 20% speed boost. Safari 4 and Chrome get less than a 10% speed boost.

It would be an easy exercise to modify the StringBuilder class’ append method and constructor to take an existing StringBuilder object instead of a string.

The arguments property of the Function object looks a lot like an array, but it’s really not. We say it’s array-like since it has a length property and properties whose names are whole numbers.

Similary, DOM properties, such as Element.childNodes, return a NodeList, which is also array-like.

If you’ve ever been frustrated that you can’t use array methods on these array-like collections, then the following function is your new friend:
Continue reading →