arguments.callee web design & development blog  

"Padding" a string ensures that its length meets or exceeds a desired minimum. PHP has a built-in function aptly named str_pad to pad strings to the left, to the right, or even on both sides. The default is to pad to the right with spaces, but you can choose to pad using any character, or even multiple characters.

    $input = "test";
    
    echo str_pad($input, 8, "x");               // testxxxx
    echo str_pad($input, 8, "x", STR_PAD_LEFT); // xxxxtest
    echo str_pad(23, 3, "0", STR_PAD_LEFT);     // 023, useful for aligning numbers
    echo str_pad(1000, 4);                      // 1000, no change

JavaScript has no built-in function to do the same, but here's an extension to the String object that works the same way:

    // arguments are "length", "character", and "direction"
    String.prototype.pad = String.prototype.pad || function(len, chr, dir) {
        var str = this;
        len = (typeof len == 'number') ? len : 0;
        chr = (typeof chr == 'string') ? chr : ' ';
        dir = (/left|right|both/i).test(dir) ? dir : 'right';
        var repeat = function(c, l) { // inner "character" and "length"
            var repeat = '';
            while (repeat.length < l) {
                repeat += c;
            }
            return repeat.substr(0, l);
        }
        var diff = len - str.length;
        if (diff > 0) {
            switch (dir) {
                case 'left':
                    str = '' + repeat(chr, diff) + str;
                    break;
                case 'both':
                    var half = repeat(chr, Math.ceil(diff / 2));
                    str = (half + str + half).substr(1, len);
                    break;
                default: // and "right"
                    str = '' + str + repeat(chr, diff);
            }
        }
        return str;
    };

    var input = 'Alien';
    alert(input.pad(10));               // "Alien     "
    alert(input.pad(10, '-=', 'left')); // "-=-=-Alien"
    alert(input.pad(10, '_', 'both'));  // "__Alien___"
    alert(input.pad(6, '___'));         // "Alien_"

My solution was adapted from PHP.js. Their port has an unused variable and does not produce the same output as native PHP str_pad for all of the examples in PHP's own documentation, but the above code should.

It can be dangerous to extend native objects in JavaScript, because changes to the language itself can produce unexpected results — If a newer version of JavaScript includes a native String.pad, you will suddenly be overriding that native function! If you prefer, you can avoid extending native String:

    function str_pad(str, chr, len, dir) {
        str = str || '';
        /* the rest of the function body is the same */
    }
    alert(str_pad('Alien', 10, '-=', 'left')); // "-=-=-Alien"