How to use padStart() and padEnd() to format strings in JS? (Tips)

A few days ago I was building a countdown timer using JavaScript so I needed to format seconds and milliseconds, I wanted seconds to always be 2 digits in length and milliseconds to be always 3 The length in digits, in other words I want 1 seconds to be displayed as 01 and 1 milliseconds to be displayed as 001.

I ended up writing my own function to "pad" the numbers, but I discovered that JavaScript has built-in functions padStart() and padEnd() to do this these functions. In this article, we take a look at how to leverage these built-in functions in JavaScript!

Use Cases

Let’s start by introducing a few different padding use cases.

Label and value

Assume you have label and value on the same line, for example name: zhangsan and Phone Number: ( 555)-555-1234. It would look a little weird if you put them together, it would be like this:

Name: zhangsan
Phone Number: (555)-555-1234

You might want this.

Name:           zhangsan
Phone Number:   (555)555-1234

Or this...

        Name: zhangsan
Phone Number: (555)555-1234

Amount

In China, when displaying the price, it usually displays two-digit dimes and cents. So instead of this...

￥10.1

you'll want this.

￥10.01

Date

For date, both day and month require 2 digits. So instead of this...

2020-5-4

you'll want this.

2020-05-04

Time

Similar to the date above, for the timer you need 2 digits for seconds and 3 digits for milliseconds. So instead of this...

1:1

you'll want this.

01:001

padstart()

Let’s start with padStart() and the label and value examples. Let's say we want the labels to be properly aligned with each other so that the values ​​start at the same position.

        Name: zhangsan
Phone Number: (555)555-1234

Since Phone Number is the longer of the two tags, we need to add a space at the beginning of the Name tag. For future needs, let's not pad it specifically to the length of the phone number, let's pad it to a little longer, say 20 characters. That way, if you use longer labels in the future, the trick will still work.

This is the starter code for displaying this information before it is populated.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);

//Name: zhangsan
//Phone Number: (555)-555-1234

Now, let’s populate the first tag. To call padStart(), you need to pass two parameters: one for the target length of the padded string, and one for the characters you wish to pad. In this case we want the length to be 20 and the padding characters to be spaces.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2 + ": " + phoneNumber);

//               Name: zhangsan
////Phone Number: (555)-555-1234

Now fill in the second row.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2.padStart(20, " ") + ": " + phoneNumber);

//               Name: zhangsan
////     Phone Number: (555)-555-1234

padEnd()

For the same label and value example, let’s change how we populate the label. Let's align the label to the left so we can add padding at the end.

Initial Code

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log(label1 + ": " + name);
console.log(label2 + ": " + phoneNumber);

//Name: zhangsan
//Phone Number: (555)-555-1234

Now, let’s populate the first tag, similar to what we did before, but with two small differences. Now, we use padEnd() instead of padStart(), and we need to connect the colon to the label before padding, so we make sure the colon is in the right place.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log(label2 + ": " + phoneNumber);

//Name:               zhangsan
//Phone Number: (555)-555-1234

Both rows are now populated.

const label1 = "Name";
const label2 = "Phone Number";
const name = "zhangsan"
const phoneNumber = "(555)-555-1234";

console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber);

//Name:               zhangsan
//Phone Number:       (555)-555-1234

What about numbers (prices, dates, timers, etc.)?

The padding function is specifically for strings, not numbers, so , we need to convert the number to a string first.

Price

Let’s look at the initial code that displays the price.

const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents); //￥10.1

To fill the points, we need to convert it to a string first, and then call the padStart() function, specifying the length as 1 and the padding character as '0';

const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents.toString().padStart(2,0)); //￥10.01

Date

This is the initial code to display the date.

const month = 2;
const year = 2020;

console.log(year + "-" + month); //2020-2

Now, let's fill in the month to make sure it's a double digit number.

const month = 2;
const year = 2020;

console.log(year + "-" + month.toString().padStart(2,"0")); // 2020-02

Timer

Finally our timer, we want to format two different numbers, seconds and milliseconds. Although the same principles apply. This is the initial code.

const seconds = 1;
const ms = 1;

console.log(seconds + ":" + ms); //1:1

Now for the padding, I'm going to do it on a separate line so it's easier to read.

const seconds = 1;
const formattedSeconds = seconds.toString().padStart(2,0);
const ms = 1;
const formattedMs = ms.toString().padStart(3,0);

console.log(formattedSeconds + ":" + formattedMs); // 01:001

Finally

Although it is not difficult to write your own padding function, why do you have to do it yourself since it is already built into JavaScript? Woolen cloth? There are a lot of interesting functions already built in. It might be worth doing a quick search before building something yourself.

This article is reproduced from: https://segmentfault.com/a/1190000022812375

Related tutorial recommendations: JavaScript video tutorial

The above is the detailed content of How to use padStart() and padEnd() to format strings in JS? (Tips). For more information, please follow other related articles on the PHP Chinese website!