Reputation: 14141

How to format numbers by prepending 0 to single-digit numbers?

I want to format a number to have two digits. The problem is caused when 0–9 is passed, so I need it to be formatted to 00–09.

Is there a number formatter in JavaScript?

Upvotes: 468

Answers (30)

Osama Malik

Reputation: 355

If someone is working with dates and your concern is with 2 digit day and month values, now you can achieve it using native Intl options.

new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
}).format(new Date('5-29-2024'))

// Result => '05/29/2024'

Another approach would be

new Date('5-29-2024').toLocaleDateString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
})

// Result => '05/29/2024'

Important thing to note here is that date format is also changing in results, you may have to reformat if you want hyphens.

Upvotes: 0

Marvin

Reputation: 754

You may also use Intl an ECMAScript International API that can customize your number as simple as this

let Number= Intl.NumberFormat('en-US', {
  minimumIntegerDigits: 2,
  minimumFractionDigits: 2
});

console.log(Number.format(2));
//02.00

and lots of embeded function that has Intl, you can put a prefix notation, signs and money format etc. for documentation just click here

Upvotes: 4

fitorec

Reputation: 4765

You can use the padStart method:

more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

check this example:

function n(num, len = 2) {
  return `${num}`.padStart(len, '0');
}

console.log(n( 9));   //print "09"
console.log(n(10));   //print "10"
console.log(n(999));  //print "999"
console.log(n(999,6));//print "000999"

Upvotes: 29

Joseph Marikle

Reputation: 78520

Edit (2021):

It's no longer necessary to format numbers by hand like this anymore. This answer was written way-back-when in the distant year of 2011 when IE was important and babel and bundlers were just a wonderful, hopeful dream.

I think it would be a mistake to delete this answer; however in case you find yourself here, I would like to kindly direct your attention to the second highest voted answer to this question as of this edit.

It will introduce you to the use of .toLocaleString() with the options parameter of {minimumIntegerDigits: 2}. Exciting stuff. Below I've recreated all three examples from my original answer using this method for your convenience.

[7, 7.5, -7.2345].forEach(myNumber => {
  let formattedNumber = myNumber.toLocaleString('en-US', {
    minimumIntegerDigits: 2,
    useGrouping: false
  })
  console.log(
    'Input:    ' + myNumber + '\n' +
    'Output:   ' + formattedNumber
  )
})

Original Answer:

The best method I've found is something like the following:

_{(Note that this simple version only works for positive integers)}

var myNumber = 7;
var formattedNumber = ("0" + myNumber).slice(-2);
console.log(formattedNumber);

For decimals, you could use this code (it's a bit sloppy though).

var myNumber = 7.5;
var dec = myNumber - Math.floor(myNumber);
myNumber = myNumber - dec;
var formattedNumber = ("0" + myNumber).slice(-2) + dec.toString().substr(1);
console.log(formattedNumber);

Lastly, if you're having to deal with the possibility of negative numbers, it's best to store the sign, apply the formatting to the absolute value of the number, and reapply the sign after the fact. Note that this method doesn't restrict the number to 2 total digits. Instead it only restricts the number to the left of the decimal (the integer part). (The line that determines the sign was found here).

var myNumber = -7.2345;
var sign = myNumber?myNumber<0?-1:1:0;
myNumber = myNumber * sign + ''; // poor man's absolute value
var dec = myNumber.match(/\.\d+$/);
var int = myNumber.match(/^[^\.]+/);

var formattedNumber = (sign < 0 ? '-' : '') + ("0" + int).slice(-2) + (dec !== null ? dec : '');
console.log(formattedNumber);

Upvotes: 831

Porses

Reputation: 11

This is a very nice and short solution:

smartTime(time) {
  return time < 10 ? "0" + time.toString().trim() : time;
}

Upvotes: 0

hasdfa

Reputation: 61

My version:

`${Math.trunc(num / 10)}${Math.trunc(num % 10)}`;

const func = (num) => `${Math.trunc(num / 10)}${Math.trunc(num % 10)}`;

const nums = [1, 3, 5, 6, 8, 9, 10, 20, 56, 80];
nums.forEach(num => console.log(func(num)));

Upvotes: 6

Javier Elices

Reputation: 2154

This is an old question, but wanted to add to it. In modern browsers you may use repeat which makes formatting simple for positive numbers:

('0'.repeat(digits - 1) + num).substr(-digits)

If you want support for IE and know the maximum number of digits (for instance, 10 digits):

('000000000' + num).substr(-digits)

For negative integers:

(num < 0 ? '-' : '') + ('000000000' + Math.abs(num)).substr(-digits)

With an explicit + for positive numbers:

['-', '', '+'][Math.sign(num) + 1] + ('000000000' + Math.abs(num)).substr(-digits)

Upvotes: 1

Aakash Sajjad

Reputation: 97

My Example like this

         var n =9;
         var checkval=('00'+n).slice(-2);
         console.log(checkval)

and the output is 09

Upvotes: 2

alistair

Reputation: 575

Updated for ES6 Arrow Functions (Supported in almost all modern browsers, see CanIUse)

const formatNumber = n => ("0" + n).slice(-2);

Upvotes: 4

Bassam

Reputation: 97

Here's the easiest solution I found:-

let num = 9; // any number between 0 & 99
let result = ( '0' + num ).substr( -2 );

Upvotes: 8

Edgar256

Reputation: 902

Here is a very simple solution that worked well for me.

First declare a variable to hold your number.

var number;

Now convert the number to a string and hold it in another variable;

var numberStr = number.toString();

Now you can test the length of this string , if it is less than desired you can append a 'zero' at the beginning.

if(numberStr.length < 2){
      number = '0' + number;
}

Now use the number as desired

console.log(number);

Upvotes: 8

Arq

Reputation: 21

I built a pretty simple format function that I call whenever I need a simple date formatted. It deals with formatting single digits to double digits when they're less than 10. It kicks out a date formatted as Sat Sep 29 2018 - 00:05:44

This function is used as part of a utils variable so it's called as:

let timestamp = utils._dateFormatter('your date string');

var utils = {
  _dateFormatter: function(dateString) {
    let d = new Date(dateString);
    let hours = d.getHours();
    let minutes = d.getMinutes();
    let seconds = d.getSeconds();
    d = d.toDateString();
    if (hours < 10) {
      hours = '0' + hours;
    }
    if (minutes < 10) {
      minutes = '0' + minutes;
    }
    if (seconds < 10) {
      seconds = '0' + seconds;
    }
    let formattedDate = d + ' - ' + hours + ':' + minutes + ':' + seconds;
    return formattedDate;
  }
}

Upvotes: 2

Noah Duncan

Reputation: 510

I know this is an ancient post, but I wanted to provide a more flexible and OO solution option.

I've extrapolated the accepted answer a bit and extended javascript's Number object to allow for adjustable zero padding:

Number.prototype.zeroPad = function(digits) {
  var loop = digits;
  var zeros = "";
  while (loop) {
    zeros += "0";
    loop--;
  }
  return (this.toString().length > digits) ?
    this.toString() : (zeros + this).slice(-digits);
}
var v = 5;
console.log(v.zeroPad(2)); // returns "05"
console.log(v.zeroPad(4)); // returns "0005"

Edit: Add code to prevent cutting off numbers longer than your requested digits.

NOTE: This is obsolete in all but IE. Use padStart() instead.

Upvotes: 5

Jee Mok

Reputation: 6556

@Lifehack's answer was very useful to me; where I think we can do it in one line for positive numbers

 String(input).padStart(2, '0');

Upvotes: 40

Siddhartha

Reputation: 1563

AS datatype in Javascript are determined dynamically it treats 04 as 4 Use conditional statement if value is lesser then 10 then add 0 before it by make it string E.g,

var x=4;
  x = x<10?"0"+x:x
 console.log(x); // 04

Upvotes: 1

Son Tr.

Reputation: 846

`${number}`.replace(/^(\d)$/, '0$1');

Regex is the best.

Upvotes: 3

Anand From Pie.host

Reputation: 1233

Improved version of previous answer

function atLeast2Digit(n){
    n = parseInt(n); //ex. if already passed '05' it will be converted to number 5
    var ret = n > 9 ? "" + n: "0" + n;
    return ret;
}

alert(atLeast2Digit(5));

Upvotes: 5

DHJ

Reputation: 31

my example would be:

<div id="showTime"></div>

    function x() {
    var showTime = document.getElementById("showTime");
    var myTime = new Date();
    var hour = myTime.getHours();
    var minu = myTime.getMinutes();
    var secs = myTime.getSeconds();
    if (hour < 10) {
        hour = "0" + hour
    };
    if (minu < 10) {
        minu = "0" + minu
    };
    if (secs < 10) {
        secs = "0" + secs
    };

    showTime.innerHTML = hour + ":" + minu + ":" + secs;
}

setInterval("x()", 1000)

Upvotes: 1

Lifehack

Reputation: 2151

In all modern browsers you can use

numberStr.padStart(2, "0");

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

function zeroPad(numberStr) {
  return numberStr.padStart(2, "0");
}

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.forEach(
  function(num) {
    var numString = num.toString();
    
    var paddedNum = zeroPad(numString);

    console.log(paddedNum);
  }
);

Upvotes: 72

jalmatari

Reputation: 331

with this function you can print with any n digits you want

function frmtDigit(num, n) {
    isMinus = num < 0;
    if (isMinus)
        num *= -1;
    digit = '';
    if (typeof n == 'undefined')
        n = 2;//two digits
    for (i = 1; i < n; i++) {
        if (num < (1 + Array(i + 1).join("0")))
            digit += '0';
    }
    digit = (isMinus ? '-' : '') + digit + num;
    return digit;
};

Upvotes: 1

leopold

Reputation: 2061

If you want to limit your digits at the same time:

function pad2(number) {
  number = (number < 10 ? '0' : '') + number;
  number = number.substring(0,2);
  return number;
}

This would also chop of any value that exceeds two digits. I have been extending this upon fanaur's solution.

Upvotes: 3

mjwrazor

Reputation: 1964

For anyone who wants to have time differences and have results that can take negative numbers here is a good one. pad(3) = "03", pad(-2) = "-02", pad(-234) = "-234"

pad = function(n){
  if(n >= 0){
    return n > 9 ? "" + n : "0" + n;
  }else{
    return n < -9 ? "" + n : "-0" + Math.abs(n);
  }
}

Upvotes: 1

Alexey Tseitlin

Reputation: 1309

    function colorOf(r,g,b){
  var f = function (x) {
    return (x<16 ? '0' : '') + x.toString(16) 
  };

  return "#" +  f(r) + f(g) + f(b);
}

Upvotes: 1

kucherenkovova

Reputation: 734

If you don't have lodash in your project it will be an overkill to add the whole library just to use one function. This is the most sophisticated solution of your problem I've ever seen.

_.padStart(num, 2, '0')

Upvotes: 3

user1052527

Reputation: 61

Here's a simple recursive solution that works for any number of digits.

function numToNDigitStr(num, n)
{
    if(num >=  Math.pow(10, n - 1)) { return num; }
    return "0" + numToNDigitStr(num, n-1);
}

Upvotes: 2

Veverke

Reputation: 11348

Here's my version. Can easily be adapted to other scenarios.

function setNumericFormat(value) {
    var length = value.toString().length;
    if (length < 4) {
        var prefix = "";
        for (var i = 1; i <= 4 - length; i++) {
            prefix += "0";
        }
        return prefix + value.toString();
    }
    return  value.toString();
}

Upvotes: 1

nyteshade

Reputation: 2872

Use the toLocaleString() method in any number. So for the number 6, as seen below, you can get the desired results.

(6).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})

Will generate the string '06'.

Upvotes: 269

fanaur

Reputation: 117

You can do:

function pad2(number) {
   return (number < 10 ? '0' : '') + number
}

Example:

document.write(pad2(0) + '<br />');
document.write(pad2(1) + '<br />');
document.write(pad2(2) + '<br />');
document.write(pad2(10) + '<br />');
document.write(pad2(15) + '<br />');

Result:

Upvotes: 10

pwuk

Reputation: 101

function zpad(n,l){
   return rep(l-n.toString().length, '0') + n.toString();
}

with

function rep(len, chr) { 
   return new Array(len+1).join(chr);
}

Upvotes: 3

Victor Jatobá

Reputation: 837

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#test').keypress(allowOnlyTwoPositiveDigts);
            });

            function allowOnlyTwoPositiveDigts(e){

                var test = /^[\-]?[0-9]{1,2}?$/
                return test.test(this.value+String.fromCharCode(e.which))
            }

        </script>
    </head>
    <body>
        <input id="test" type="text" />
    </body>
</html>

Upvotes: 2

How to format numbers by prepending 0 to single-digit numbers?

Answers (30)

Edit (2021):

Original Answer:

Related Questions