How to output numbers with leading zeros in JavaScript? [duplicate]

Question

Is there a way to prepend leading zeros to numbers so that it results in a string of fixed length? For example, 5 becomes "05" if I specify 2 places.

I've found this wich I guess is far more simple: ("00" + h).slice (-3); — Paulo Bueno
– Paulo Bueno, Commented Jul 30, 2012 at 20:26
@PauloBueno ("00" + 1234).slice (-3); gives 234 i.e. discards the most significant figure. — Daniel Earwicker
– Daniel Earwicker, Commented Aug 14, 2012 at 8:05
@DanielEarwicker sure it does but you should adjust to the ammount of digits you are expecting. ("000" + 1234).slice(-4), ("0000" + 12345).slice(-5) and so on... — Paulo Bueno
– Paulo Bueno, Commented Aug 15, 2012 at 19:25
If you also want to limit the length of the number you could use this: return (num/Math.pow(10,size)).toFixed(size).split('.')[1]; — loafer
– loafer, Commented Feb 18, 2015 at 14:55
Now javascript supports padStart: (5).toString().padStart(3, "0"). — fdelia
– fdelia, Commented Feb 5, 2018 at 11:02

igorsantos07 · Accepted Answer · 2024-06-16 20:17:23Z

989

NOTE: Potentially outdated. ECMAScript 2017 includes String.prototype.padStart.

You'll have to convert the number to a string since numbers don't make sense with leading zeros. Something like this:

function pad(num, size) {
    num = num.toString();
    while (num.length < size) num = "0" + num;
    return num;
}

Or, if you know you'd never be using more than X number of zeros, this might be better. This assumes you'd never want more than 10 digits.

function pad(num, size) {
    var s = "000000000" + num;
    return s.substr(s.length-size);
}

If you care about negative numbers you'll have to strip the - and re-add it.

edited Jun 16, 2024 at 20:17

igorsantos07

4,7217 gold badges50 silver badges65 bronze badges

answered Jun 8, 2010 at 15:33

InfinitiesLoop

14.7k3 gold badges33 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Blaise Over a year ago

Second function; shorter: function pad(num, size){ return ('000000000' + num).substr(-size); }

InfinitiesLoop Over a year ago

^ Negative values won't work in many versions of IE.

InfinitiesLoop Over a year ago

Ah, apparently slice() works with negative values in IE though :) stackoverflow.com/questions/2243824/…

Enrico Over a year ago

figured it out: value = pad(value, 18); ==> always returns 18 characters, so if you add 10 zero's size should be 10.

Hannes Schaletzky Over a year ago

substr() is considered deprecated, use substring() instead :)

|

Christian C. Salvadó · Accepted Answer · 2019-12-23 18:58:59Z

688

UPDATE: Small one-liner function using the ES2017 String.prototype.padStart method:

const zeroPad = (num, places) => String(num).padStart(places, '0')

console.log(zeroPad(5, 2)); // "05"
console.log(zeroPad(5, 4)); // "0005"
console.log(zeroPad(5, 6)); // "000005"
console.log(zeroPad(1234, 2)); // "1234"

Another ES5 approach:

function zeroPad(num, places) {
  var zero = places - num.toString().length + 1;
  return Array(+(zero > 0 && zero)).join("0") + num;
}

zeroPad(5, 2); // "05"
zeroPad(5, 4); // "0005"
zeroPad(5, 6); // "000005"
zeroPad(1234, 2); // "1234" :)

edited Dec 23, 2019 at 18:58

answered Jun 8, 2010 at 15:39

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

6 Comments

Crescent Fresh Over a year ago

You're not taking into account negative array sizes ;) eg zeroPad(1234, 2) -> RangeError: Invalid array length

andrewrk Over a year ago

According to this benchmark, this method is 5 times slower than the accepted solution: gist.github.com/4382935

Michelle Tilley Over a year ago

I like the code, but it does seem to be slower in Chrome. Interested in seeing results from other browsers: jsperf.com/zero-padding-number-methods

Matthis Kohli Over a year ago

For Node.js this is the best working solution. GJ

fIwJlxSzApHEZIl Over a year ago

If you're slow like me the argument for num in the .padStart call is NOT the length to pad with but the maximum length to pad to. Important distinction.

|

pim · Accepted Answer · 2017-12-06 16:42:31Z

269

You could extend the Number object:

Number.prototype.pad = function(size) {
    var s = String(this);
    while (s.length < (size || 2)) {s = "0" + s;}
    return s;
}

Examples:

(9).pad();  //returns "09"

(7).pad(3);  //returns "007"

edited Dec 6, 2017 at 16:42

pim

12.7k6 gold badges71 silver badges70 bronze badges

answered Jun 25, 2012 at 10:39

Mild Fuzz

31.3k34 gold badges106 silver badges152 bronze badges

9 Comments

novwhisky Over a year ago

I think this is just what I need. The argument 'size' refers to the FINAL character count and not the total number of zeros to add, right?

Mild Fuzz Over a year ago

yeah, it does, it checks the total length and compares that.

Mild Fuzz Over a year ago

Yeah, it depends on where you are using it. It is not inherently bad thing, but if used in a space with lots of third party involvement, potentially a risk with overwriting functionality.

trusktr Over a year ago

(9).pad() and (7).pad(3) with parens!

Adam Over a year ago

The problem is not comparable to globals, nor does it have anything to do with IE6. The problem is perpetual. The fact that it was discovered years ago doesn’t make it go away. The problem is that the language itself evolves. Who’s to say your .pad() will work the same way as a native version, should it ever come along? I can’t find my original comment. Hopefully it’s just a bug in Stack Overflow. If it was deleted, that would be a poor reflection of the state of things around here.

|

Community · Accepted Answer · 2021-02-03 17:34:45Z

70

From https://gist.github.com/1180489

function pad(a, b){
  return(1e15 + a + '').slice(-b);
}

With comments:

function pad(
  a, // the number to convert 
  b // number of resulting characters
){
  return (
    1e15 + a + // combine with large number
    "" // convert to string
  ).slice(-b) // cut leading "1"
}

edited Feb 3, 2021 at 17:34

CommunityBot

11 silver badge

answered Aug 31, 2011 at 7:58

dave1010

15.5k7 gold badges70 silver badges64 bronze badges

5 Comments

Brock Adams Over a year ago

This is good but it has a fatal flaw. For example, pad (1234, 3) === "234"! Which is obviously, unacceptable.

Mild Fuzz Over a year ago

It's also broken if you want padding longer than 15. Elegant, but pretty inflexible.

JamesThomasMoon Over a year ago

@dave1010 I got a bad result pad(1234) yields "1000000000001234" . with parameter pad(1234,20) yields "1000000000001234" Thanks @Brock Adams

Brock Adams Over a year ago

@JamesThomasMoon1979, see this answer. Not only does it work properly (while most other answers fail many test cases), it significantly outperforms the other approaches -- especially if you use the logarithmic variation linked in the comments.

JamesThomasMoon Over a year ago

@BrockAdams My test case is in my prior comment. It did not work properly. Tested on firefox 35 on Ubuntu.

Shef · Accepted Answer · 2011-09-12 12:04:57Z

15

function zfill(num, len) {return (Array(len).join("0") + num).slice(-len);}

edited Sep 12, 2011 at 12:04

Shef

45.6k15 gold badges82 silver badges91 bronze badges

answered Sep 11, 2011 at 17:26

ithinc

1831 silver badge2 bronze badges

3 Comments

Shef Over a year ago

When you post code select it and click on the {} button so it gets formatted as such.

Lukáš Rampa Over a year ago

zfill(1234, 3) === "234"

Atul Gupta Over a year ago

function zFill(n,l){return (l>n.toString().length)?((Array(l).join('0')+n).slice(-l)):n;}

Christoph · Accepted Answer · 2010-06-08 16:35:12Z

5

Just for fun (I had some time to kill), a more sophisticated implementation which caches the zero-string:

pad.zeros = new Array(5).join('0');
function pad(num, len) {
    var str = String(num),
        diff = len - str.length;
    if(diff <= 0) return str;
    if(diff > pad.zeros.length)
        pad.zeros = new Array(diff + 1).join('0');
    return pad.zeros.substr(0, diff) + str;
}

If the padding count is large and the function is called often enough, it actually outperforms the other methods...

answered Jun 8, 2010 at 16:35

Christoph

171k36 gold badges186 silver badges241 bronze badges

Collectives™ on Stack Overflow

How to output numbers with leading zeros in JavaScript? [duplicate]

6 Answers 6

15 Comments

6 Comments

9 Comments

5 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

15 Comments

6 Comments

9 Comments

5 Comments

3 Comments

Comments

Linked

Related