JS Tip of the Day: Format Time Strings with Padding

programming web dev
1

Format Time Strings with Padding
Version: ES2017
Level: Intermediate

Strings have two builtin methods that allow you to add padding: padStart() and padEnd(). These create new strings that pad the original string with another string, either added to the start or end, repeating it until the resulting string matches a specified length.

let str = 'str';
console.log(str.padStart(6, '*')); // ***str
console.log(str.padEnd(6, '*')); // str***

padStart() is especially convenient for adding preceding 0’s to time values. If you want to show a seconds value in a digital display, for example, you may want to be sure that values less than 10 always have a 0 in front of it. So if you have a 3, it should be displayed as ‘03’ and not ‘3’. The following example does just that, using padStart() to add preceding 0’s to both a seconds value and a milliseconds value when displaying (logging) the time taken to run a call to setTimeout().

function logTimeTaken (startTime) {
    let timeTaken = Date.now() - startTime;
    let ms = timeTaken % 1000;
    let sec = Math.floor(timeTaken / 1000) % 60;
    let msStr = String(ms).padStart(3, '0');
    let secStr = String(sec).padStart(2, '0');
    console.log(`${secStr}:${msStr}`);
}

setTimeout(logTimeTaken, 1, Date.now()); // 00:001
setTimeout(logTimeTaken, 30, Date.now()); // 00:030
setTimeout(logTimeTaken, 2500, Date.now()); // 02:500
// Note: variations in setTimeout accuracy may
// show slightly different results

Because seconds values will always be shown with 2 digits (00-59), padStart() is called with a length value of 2 while milliseconds with 3 digits (000-999) uses a length of 3. This ensures each result is displayed in the format ##:### no matter how large (err, small) the actual time values are.

More info: