Template Literals ES6 and some ES5 ways.

src

Hi people, I hope you guys are good. This is the continuation of the JavaScript tutorials. I am trying to make it progressive and not to confuse you guys. So for this post, we will be looking at template literals.

Template Literals are part of ES6 but are highly compatible with modern browsers so you don't have to compress your ES6 down. Without further ado, I will start the tutorial. I hope you follow up and enjoy it.

const name = 'Vidder';
const job = 'Web developer';
const age = 25; 
const town = 'Las Vegas';
let html;

// While you build applications, you will mostly insert Html from javascript. This could be a list of something or a table. So we will be doing something of the sort here.

function howdy(){
    return 'howdy';
}

// Template Literals

html =`
<ul>
<li>Name: ${name}</li>
<li>Job: ${job}</li>
<li>Age: ${age}</li>
<li>Town: ${town}</li>
<li>${howdy()}</li>
</ul>

`;

// More could be done with template literals. You could add expressions and functions as I did in the additional li'(howdy)

// Without Template Literals. This is the es5 way of doing this. They both work, but the es6 way is cleaner and simple. Also when you get to a point things could get a bit messy with the es5 ways.

html = '<ul><li>Name:' + name + '</li><li>Job: ' + job + ' </li><li>Age: ' + age + ' </li><li>Town: ' + town + ' </li></ul>';

// This also works the same way but looks unclean. You could also put them in a different line. The look of this could be very confusing. You could have this

html = '<ul>' +
'<li>Name:' + name + '</li>' +
'<li>Job: ' + job + ' </li>' +
'<li>Age: ' + age + ' </li>' + 
'<li>Town: ' + town + ' </li>' +
'</ul>';

// That still works. You see that we have to use the + to concatenate them. If you move to the next line with the concatenation it will be a mess.

document.body.innerHTML = html;  // I used this to output it in the browser. It may be new to you but I will get to where I will explain everything about DOM. 

This is all the basics you need to know about this. I will continue later with Arrays and a couple of things. Stay close and get something from these.

Thank you!