Template String

var name="Hemant", 
    loc = "Hyderabad";

var str = `
    my name is ${name}, 
    I am stying in ${loc}`;

console.log(str);

// output
    my name is Hemant, 
    I am stying in Hyderabad

Loop inside string literal (Nested ``)

var dogs = [
    {name: 'Puffy'},
    {name: 'Duffy', age: 2},
    {name: 'Tomy'}
];

const markup = 
`<ul class="dogs">
    ${dogs.map(dog => `
        <li>${dog.name}</li>
    `).join('')}
</ul>
`
console.log(markup);
// output
<ul class="dogs">

        <li>Puffy</li>

        <li>Duffy</li>

        <li>Tomy</li>

</ul>

if inside string literal ``

var dogs = [
    {name: 'Puffy'},
    {name: 'Duffy', age: 2},
    {name: 'Tomy'}
];

const markup = 
`<ul class="dogs">
    ${dogs.map(dog => `
        <li>${dog.name}${dog.age ? ` - ${dog.age}` : ''}</li>
    `).join('')}
</ul>
`
console.log(markup);

Use Case 1 ( variable manipulation )

var x =1, y=2;

var str = `sum of 
    ${x} + ${y} = ${x +y}
`;

console.log(str);

// output
sum of 
    1 + 2 = 3

Use Case 2

var x =1, y=2;

var str = ` Today's date is
    ${new Date()}
`;

// output
 Today's date is
    Sun Dec 06 2015 17:36:32 GMT+0530 (India Standard Time)

Last updated

Was this helpful?