Template Literals (Template Strings)

This is the second of twelve series in this ECMA 2015 (ES6) for React.js topic. You can check my posts to view previous and higher series.

ES6 Template Literals

ECMAScript 2015 introduces a new concept known as template literals. This concept could be referred to as interpolation which is the process embedding an expression into part of a string (we would look at some examples), pretty cool, huh?

Template Literals (informally known as Template Strings) may seem to have some similarities with string literals (basic strings). Template Literals unlike String Literals makes use of three symbols:

• the backtick delimiter (``) - an alternative to String quotation('')

• dollar sign ($) - used to declare the expression

• curly ({}) - wraps the expression

  Below is a Template String Literal:

 //Untagged literal
  `this is a string ${expression} here is a string ${another expression}`

//tagged literal
 tag`this is a string ${expression} here is a string ${another expression}`

Type of Template Literals

• Untagged Template Literal: this is results in a string

  //Untagged literal
  
  let name = "Bruno"
  
  let result = `My German Shepard is called ${name} it is about ${ 6 + 5} years old.`
  
  console.log(result)
  

  // OUTPUT
  'My German Shepard is called Bruno it is about 11 years old.'
  

• Tagged Template Literals: when the name of a function precedes the template this function is called a Tag. This tag manipulates the final result.

  //tagged literal

   //tag`this is a string ${expression} here is a string ${another expression}`

  // OUTPUT
  'My German Shepard is called Bruno it is about 11 years old.'

Advantages of Using Template Literals

1. Easier alternative to concatenation

      let day = "Morning"
      let breakfast = "carrot" 
      let chore = "mop"
   
      // regular concatenation
   
      let concatenation = "Every " + day + " I feed my rabbit " + breakfast + ". I also ensure I " + chore + " my home" 
   
      // template literal
   
      let template = `Every ${day} I feed my rabbit ${breakfast}. I also ensure I ${chore} my home`
   
      console.log(concatenation)
      console.log(template)
   

      // OUTPUT
   
      'Every Morning I feed my rabbit carrot. I also ensure I mop my home'
   
      'Every Morning I feed my rabbit carrot. I also ensure I mop my home'
   

   Using concatenation requires more effort than template literals, as you have to make use of white spacing for each piece of string to ensure spacing between each word, this would require extra care.

2. Allows for multiple lines

   let multipleLines = `Unlike concatenation
                       I notice new lines.
                       You do not need an escape operator "\n"`
   

      // OUTPUT
   'Unlike concatenation
   I notice new lines.
   You do not need an escape operator "\n"'
   

For more on Tagged Template Literals read this blog post by Wesbos