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

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?

Solutions/Answers:

Solution 1:

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);

Solution 2:

If the number is higher than 9, convert the number to a string (consistency). Otherwise, add a zero.

function n(n){
    return n > 9 ? "" + n: "0" + n;
}

n( 9); //Returns "09"
n(10); //Returns "10"
n(999);//Returns "999"

Solution 3:

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’.

Related:  Javascript onclick hide div

Solution 4:

Here’s a simple number padding function that I use usually. It allows for any amount of padding.

function leftPad(number, targetLength) {
    var output = number + '';
    while (output.length < targetLength) {
        output = '0' + output;
    }
    return output;
}

Examples:

leftPad(1, 2) // 01
leftPad(10, 2) // 10
leftPad(100, 2) // 100
leftPad(1, 3) // 001
leftPad(1, 8) // 00000001

Solution 5:

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);
  }
);

Solution 6:

("0" + (date.getMonth() + 1)).slice(-2);
("0" + (date.getDay())).slice(-2);