Template Literals

// Template Literals

const firstName = 'John';
const age = 36;
const job = 'Web developer';
const city = 'Miami';
let html;

// Without template strings (es5)
html = '<ul><li>Name: ' + firstName + ' </li><li>Age: ' + age + ' </li><li>Job: ' + job + ' </li><li>City: ' + city + ' </li></ul>';


html = '<ul>' +
            '<li>Name: ' + firstName + ' </li>' +
            '<li>Age: ' + age + ' </li>' +
            '<li>Job: ' + job + ' </li>' +
            '<li>City: ' + city + ' </li>' +
        '</ul>';


function hello(){
    return 'Hello';
}
// With template strings (es6)
html = `
    <ul>
        <li>Name: ${firstName}</li>
        <li>Age: ${age}</li>
        <li>Job: ${job}</li>
        <li>${2 + 2}</li>
        <li>${hello()}</li>
        <li>${age > 30 ? 'Over 30' : 'Under 30'}</li>
    </ul>
    `;

document.body.innerHTML = html;