Possible Duplicate:
How can I create a Zerofilled value using JavaScript?

In JavaScript, I need to have padding.
For example, if I have the number 9, it will be “0009”. If I have a number of say 10, it will be “0010”. Notice how it will always contain four digits.
One way to do this would be to subtract the number minus 4 to get the number of 0s I need to put.
Is there was a slicker way of doing this?

### Solution 1:

Not a lot of “slick” going on so far:

``````function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
``````

When you initialize an array with a number, it creates an array with the `length` set to that value so that the array appears to contain that many `undefined` elements. Though some Array instance methods skip array elements without values, `.join()` doesn’t, or at least not completely; it treats them as if their value is the empty string. Thus you get a copy of the zero character (or whatever “z” is) between each of the array elements; that’s why there’s a `+ 1` in there.

Example usage:

``````pad(10, 4);      // 0010

``````

### Solution 2:

``````function padToFour(number) {
if (number<=9999) { number = ("000"+number).slice(-4); }
return number;
}
``````

Something like that?

Bonus incomprehensible-but-slicker single-line ES6 version:

``````let padToFour = number => number <= 9999 ? `000\${number}`.slice(-4) : number;
``````

ES6isms:

• `let` is a block scoped variable (as opposed to `var`’s functional scoping)
• `=>` is an arrow function that among other things replaces `function` and is prepended by its parameters
• If a arrow function takes a single parameter you can omit the parentheses (hence `number =>`)
• If an arrow function body has a single line that starts with `return` you can omit the braces and the `return` keyword and simply use the expression
• To get the function body down to a single line I cheated and used a ternary expression

### Solution 3:

Try:

``````String.prototype.lpad = function(padString, length) {
var str = this;
while (str.length < length)
return str;
}
``````

Now test:

``````var str = "5";
var str = "10"; // note this is string type
``````

`DEMO`

In ECMAScript 8 , we have new method `padStart` and `padEnd` which has below syntax.

So now we can use

``````const str = "5";
``````

### Solution 4:

Funny, I recently had to do this.

``````function padDigits(number, digits) {
return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}
``````

Use like:

``````padDigits(9, 4);  // "0009"
``````

Not beautiful, but effective.

### Solution 5:

You did say you had a number-

``````String.prototype.padZero= function(len, c){
var s= '', c= c || '0', len= (len || 2)-this.length;
while(s.length<len) s+= c;
return s+this;
}
}
``````

### Solution 6:

You could do something like this:

``````function pad ( num, size ) {
return ( Math.pow( 10, size ) + ~~num ).toString().substring( 1 );
}
``````

Edit: This was just a basic idea for a function, but to add support for larger numbers (as well as invalid input), this would probably be better:

``````function pad ( num, size ) {
if (num.toString().length >= size) return num;
return ( Math.pow( 10, size ) + Math.floor(num) ).toString().substring( 1 );
}
``````

This does 2 things:

1. If the number is larger than the specified size, it will simply return the number.
2. Using `Math.floor(num)` in place of `~~num` will support larger numbers.