Exponent operator in ES2016 - ES7

Array Includes method in ES2016 - ES7

Iterate over properties of an object with ES2017 Object.entries()

Iterate over values of an object with ES2017 Object.values()

String Padding in Javascript using padStart and padEnd functions

Clone Objects and Copy Properties with ES2017 Property Descriptors

Async keyword in es2016 

Learn JavaScript es2016 and Beyond

ES2017 added two new string functions. They are `padStart` and `padEnd` functions.
In this lesson, we will understand how to use these functions and a few usecases to demonstarte the power they offer.

https://app.egghead.io/api/v1/lessons/javascript-string-padding-in-javascript-using-padstart-and-padend-functions/subtitles

Instructor: [00:00] A certain padding L2 function that help us build complex string structures, such as these tabular data structures, and help us render them in the concept. Let's look at a much simpler example now.

[00:13] We have a constant called name, and it's equal to a string, Akash. Then we apply the padding function on this, and pass it in a parameter of 10. It is name.padding, and then we are storing it in the constant called thisPaddedName. Then we'll log it with the pipe symbol at the end.

[00:30] If we log our output, you can see that we have Akash. Then at the end, we have five more white spaces, and after that, the pipe symbol is rendered. Now, we can also use padStart over here. If we run the file, you can see that we have white spaces in front of Akash, and then we have the symbol.

[00:50] Now, it's not just white spaces that you can print. You can also pass in a second parameter that will take in a string, and which will be used for the padding. Now, you can see that we have five dollar symbols added in front of the string Akash.

[01:04] You can also pass in a string with multiple characters. It's going to loop through, printing all the multiple characters, again and again until it fills up the whole space. Now, in this case, we have five characters to be filled up, and we only have two characters in the string. It's going to print out dollar, and asterisk, and dollar and asterisk.

[01:23] Since the last spot is only one space long, and we have two characters, it's going to only print out dollar in that case. Let's look at this example that I've shown you earlier. Here, we have the top right that species the column and its labels. Here is the data that is being rendered in a tabular format.

[01:44] Here, I have three different areas that represent the data in the table. I have the first console log that represents the first row of the tabular data, which basically represents the labels of the data. Then as you can see, we are using the padStart function on the string names, which is causing it to write a line.

[02:04] It has first five white spaces, and then the string names. The same thing applies to max, and also pass or fail. Now, here, we have the separating line. I am taking an empty string, and then padding it at the end with 38 spaces, essentially, with the character, dash.

[02:24] You get this nice operating line between the top and the bottom of the table. Then we have the actual data being rendered inside the table using the for loop. Here, we are making padded versions of the data that are being taken from the areas declared up.

[02:38] You're using padding function on the name, and we are passing in 10 for the length. If you checked out the first line that is being printed, it has Akash. It also printed five characters, and then there are five white spaces.

[02:51] Then on the second line, we have seven characters filled up, with three more white spaces at the end. The same goes for the next line of the data. The actual printing of the data is going on here, where we have each padded version of the data being separated by one pipe operator.

[03:07] Let's look at one more example over here. We have a constant called name, and we passed in a string. Here, we are logging out a padded version of the same string that we are using the padding function. Then here, instead of having a static number, we are using name.length.

[03:22] That is, we are taking the length of the string itself, and then adding three more spaces to the actual length, essentially making the string three more characters wide. The second parameters, we pass in the ellipses, and there are precisely three ellipses. If you take the log, you can see that we have the string with three ellipses at the end.

String Padding in Javascript using padStart and padEnd functions

Share this video with your friends

Course

Learn JavaScript es2016 and Beyond