ES6 Template literals.

script.js

let name  = "Parvez";
let job = "Developer";
let tools = "JavaSCript and CSS";

// Single Interpolation(Using old conventional way)
console.log("My name is "+name+" and I am a "+job+". I write "+tools+".");

// Using ES6's template literals, we will do this
console.log(`My name is ${name} and I am a ${job}. I write ${tools}.`)

// Embed maths expression using template literals
console.log(`Parvez has ${5+3} cats and ${3+2} dogs.`)

// Embed a function
let sayHello = () => "Hello";
console.log(`${sayHello()}, it's the code boy next door`);

let sayName = () => "Template Literals";
let num = 5;
console.log(`I am ${sayName()} and I am ${num*2}x more powerful.`);

// Multi Line Strings
console.log('I am the first line \n, I am the second line \n and I am the third line'); // Old JavaScript Method.

console.log(`I am the first line
I am the second line
I am the third line.`);

// Add HTML using JS template literals.
const animal = {
  kind: 'Monkey',
  food: 'Banana',
  hobby: 'junping trees',
}

const display = `
  <div class="animal">
    <h1>Hey, this is a ${animal.kind}</h1>
    <p>It eats ${animal.food} and loves ${animal.hobby}</p>
  </div>
`;

document.body.innerHTML = display;