How can I create a Zerofilled value using JavaScript?

Question

What is the recommended way to zerofill a value in JavaScript? I imagine I could build a custom function to pad zeros on to a typecasted value, but I'm wondering if there is a more direct way to do this?

Note: By "zerofilled" I mean it in the database sense of the word (where a 6-digit zerofilled representation of the number 5 would be "000005").

Answer 1

A simple function is all you need

function zeroFill( number, width )
{
  width -= number.toString().length;
  if ( width > 0 )
  {
    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
  }
  return number;
}

you could bake this into a library if you want to conserve namespace or whatever. Like with jQuery's extend.

Answer 2

Here's a quick function I came up with to do the job. If anyone has a simpler approach, feel free to share!

function zerofill(number, length) {
    // Setup
    var result = number.toString();
    var pad = length - result.length;

    while(pad > 0) {
     result = '0' + result;
     pad--;
    }

    return result;
}

Answer 3

I actually had to come up with something like this recently. I figured there had to be a way to do it without using loops.

This is what I came up with.

function zeroPad(num, numZeros) {
 var n = Math.abs(num);
 var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
 var zeroString = Math.pow(10,zeros).toString().substr(1);
 if( num < 0 ) {
  zeroString = '-' + zeroString;
 }

 return zeroString+n;
}

Then just use it providing a number to zero pad:

> zeroPad(50,4);
"0050"

If the number is larger than the padding, the number will expand beyond the padding:

> zeroPad(51234, 3);
"51234"

Decimals are fine too!

> zeroPad(51.1234, 4);
"0051.1234"

If you don't mind polluting the global namespace you can add it to Number directly:

Number.prototype.leftZeroPad = function(numZeros) {
 var n = Math.abs(this);
 var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
 var zeroString = Math.pow(10,zeros).toString().substr(1);
 if( this < 0 ) {
  zeroString = '-' + zeroString;
 }

 return zeroString+n;
}

And if you'd rather have decimals take up space in the padding:

Number.prototype.leftZeroPad = function(numZeros) {
 var n = Math.abs(this);
 var zeros = Math.max(0, numZeros - n.toString().length );
 var zeroString = Math.pow(10,zeros).toString().substr(1);
 if( this < 0 ) {
  zeroString = '-' + zeroString;
 }

 return zeroString+n;
}

Cheers!

Answer 4

This method isn't faster, but it's fairly native.

zeroPad = function (num, count) {
    return [Math.pow(10, count - num.toString().length), num].join('').substr(1);
};

Answer 5

function zeroPad(num,digits){ return ((num/Math.pow(10,digits))+'').slice(2) }

Answer 6

This one is less native, but may be the fastest...

zeroPad = function (num, count) {
    var pad = (num + '').length - count;
    while(--pad > -1) {
        num = '0' + num;
    }
    return num;
};

Answer 7

Our tests were bogus because mine had a typo.

zeroPad = function (num, count) {
    return ((num / Math.pow(10, count)) + '').substr(2);
};

Paul's is the fastest, but I think .substr is faster than .slice even if it is one character more ;)

Answer 8

Some monkeypatching also works

String.prototype.padLeft = function (n, c) {
  if (isNaN(n))
    return null;
  c = c || "0";
  return (new Array(n).join(c).substring(0, this.length-n)) + this; 
};
var paddedValue = "123".padLeft(6); // returns "000123"
var otherPadded = "TEXT".padLeft(8, " "); // returns "    TEXT"

Answer 9

Hi, just wanted to make the comment (but i don't have enough points) that the highest voted answer fails with negative numbers and decimals

function padNumber(n,pad) {
    p = Math.pow(10,pad);
    a = Math.abs(n);
    g = (n<0);
    return (a < p) ?  ((g ? '-' : '') + (p+a).toString().substring(1)) : n;
}

padNumber( -31.235, 5);

"-00031.235"