# Pad a number with leading zeros in JavaScript [duplicate]

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?

## Answers: 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
pad(9, 4);       // 0009
pad(123, 4);     // 0123

pad(10, 4, '-'); // --10
`````` ``````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 Try:

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

Now test:

``````var str = "5";
alert(str.lpad("0", 4)); //result "0005"
var str = "10"; // note this is string type
alert(str.lpad("0", 4)); //result "0010"
``````

`DEMO`

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

'string'.padStart(targetLength [,padString]):

So now we can use

``````const str = "5";
str.padStart(4, '0'); // '0005'
`````` 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"
padDigits(10, 4); // "0010"
padDigits(15000, 4); // "15000"
``````

Not beautiful, but effective. 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;
}
Number.prototype.padZero= function(len, c){
return String(this).padZero(len,c);
}
`````` 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. For fun, instead of using a loop to create the extra zeros:

``````function zeroPad(n,length){
var s=n+"",needed=length-s.length;
if (needed>0) s=(Math.pow(10,needed)+"").slice(1)+s;
return s;
}
`````` This is not really 'slick' but it's faster to do integer operations than to do string concatenations for each padding `0`.

``````function ZeroPadNumber ( nValue )
{
if ( nValue < 10 )
{
return ( '000' + nValue.toString () );
}
else if ( nValue < 100 )
{
return ( '00' + nValue.toString () );
}
else if ( nValue < 1000 )
{
return ( '0' + nValue.toString () );
}
else
{
return ( nValue );
}
}
``````

This function is also hardcoded to your particular need (4 digit padding), so it's not generic. Since you mentioned it's always going to have a length of 4, I won't be doing any error checking to make this slick. ;)

``````function pad(input) {
var BASE = "0000";
return input ? BASE.substr(0, 4 - Math.ceil(input / 10)) + input : BASE;
}
``````

Idea: Simply replace '0000' with number provided... Issue with that is, if `input` is 0, I need to hard-code it to return '0000'. LOL.

This should be slick enough.

JSFiddler: http://jsfiddle.net/Up5Cr/

## Top Questions

©2020 All rights reserved.