JS ES6 template literals and leading/suffix zeros to number

Question

In Python it's possible to append leading zeros to number when building a string like this

print "%02d" % (1)
//>> "01"

Is it possible to do the same with ES6 template literals?

(If, is it also possible to do the same with spaces instead of zeros: " 1"?)

Answer 1

You can use the string function padStart by converting the number to string with toString() and then padding with padStart where the first argument is the length and the second is what to pad with.

let n = 1;
n.toString().padStart(2, "0")
//=>"01"

Answer 2

If your numbers can only be between 0 and 99 then try this:

for (let n = 0; n < 10; n++) {
  console.log(n.toString().padStart(2, "0"));
}

If you want to use spaces then try this:

for (let n = 0; n < 10; n++) {
  console.log(n.toString().padStart(2, " "));
}

If you don't want to use padStart then try this:

for (let n = 0; n < 100; n+=5) {
  console.log(('0'+n.toString()).slice(-2));
}

Or even this:

for (let n = 0; n < 100; n+=5) {
  console.log(`0${n}`.slice(-2));
}

This last one uses the ES6 literals but still uses the slice to only get the last 2 characters.

To use spaces on the last two just change the 0 to ` space.

String.padStart is only available on newer browser versions. So you might need a polyfill.

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

Answer 3

You could try prepending the maximum width as a fixed string of characters to the value then slice the resulting string to size.

Example: Let's say you want your numbers left padded with a period to a maximum width of 6

console.log((`......${123}`).slice(-6));  // ...123

console.log((`......${12345}`).slice(-6)) // .12345

const v = 99;
console.log((`......${v}`).slice(-6))     // ....99