How to output numbers with leading zeros in JavaScript?

In JavaScript, outputting numbers with leading zeros can be achieved using several different methods.

Method 1: Using String.prototype.padStart() Method

This method pads a string with characters at the beginning until it reaches a specified length. For numbers, convert it to a string first and then apply the padStart() method.

javascript
function padNumber(num, length) {
    return num.toString().padStart(length, '0');
}

const num = 5;
const paddedNum = padNumber(num, 2); // Outputs "05"
console.log(paddedNum);

In this example, the number 5 is converted to a string and padded with 0 to a length of 2.

Method 2: Using slice() Method

This method works indirectly by manipulating strings rather than directly operating on numbers. First, generate a string with sufficient leading zeros, then convert the number to a string and append it, and finally use slice() to extract the required length from the end.

javascript
function leadingZero(num, totalLength) {
    const numStr = '0000000000' + num; // Create a string with sufficient leading zeros
    return numStr.slice(-totalLength);
}

const num = 5;
const result = leadingZero(num, 2); // Outputs "05"
console.log(result);

Although this method appears less elegant, it is very useful in older JavaScript environments because padStart() is a newer feature introduced in ES2017.

Method 3: Using toFixed() Method

For numbers requiring a fixed number of decimal places, use the toFixed() method, which returns the number as a string while maintaining the specified decimal places.

javascript
function fixedZero(num, digits) {
    return num.toFixed(digits);
}

const num = 5;
const fixedNum = fixedZero(num, 2); // Outputs "5.00"
console.log(fixedNum);

This method is primarily used for handling numbers with decimals. If only the integer part requires leading zeros, the first two methods are more suitable.

The above are several common methods for outputting numbers with leading zeros in JavaScript. Each method has its specific use cases, and you can choose based on your requirements.