JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Nesting template strings in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to display the FullName using nested template string</h3>

CSS

body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: red;
}

JavaScript

let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   function fullName(firstName, lastName) {
      return firstName + " " + lastName;
   }
   let firstName = "Tùng";
   let lastName = "Hoàng";
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = `FirstName = ${firstName} and lastname = ${lastName} 
      => FullName = ${fullName(
         `${firstName}`,
         `${lastName}`
      )}`;
   });