ES6 in Depth
  • Introduction
  • Installation
  • Block Scope
    • Constant
    • Use cases
  • Template String
    • New String Methods
    • Tagged Template Literal
  • New Number Methods
  • Arrow Function
    • Default Parameters
    • Lexical This Scope
    • Where not to use arrow function
  • Object Enhancement
  • New Array Methods
    • For Of
  • Spread Operator
  • Destructuring
    • Array Destructuring
  • Class
  • Symbols
  • New Data Structures
    • Set
    • Map
    • WeakSet
    • WeakMap
    • Iterators
    • Generators
  • Promise
  • Import Export
Powered by GitBook
On this page
  • Loop inside string literal (Nested ``)
  • if inside string literal ``
  • Use Case 1 ( variable manipulation )
  • Use Case 2

Was this helpful?

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)
PreviousUse casesNextNew String Methods

Last updated 4 years ago

Was this helpful?