Skip to main content

Command Palette

Search for a command to run...

Template Literals

Updated
•2 min read•View as Markdown
Template Literals

Before ES6 we are also using String Concatination,Right so why do we need template literals let's understand it in this blog

Before Template Literals

String Concatination

What is String Concatination ?

String concatination meaning in simple words is Joining two or more strings to form a single string

// String concatination
let a = 'Hello ';
let b = 'World';
console.log(a + b);
// output
// Hello World 

Problems of String Concatination

  • Coercion

  • Readability

  • Maintenance

After Template Literals

In ModerJS template literals is a modern way to work with string in JavaScript using backticks ` instead of traditional quotes

String Interpolation

By string interpolation we can use backticks to avoid problems of concatination, we can also use multiple outputs her

syntax:

let a = 30;
console.log(`Value of a: ${a}`);

MultiLine Strings

By backticks we can use multi-line string

let biodata = `Dr. A.P.J. Abdul Kalam (15 October 1931 – 27 
July 2015) was an eminent Indian aerospace scientist and
 statesman who served as the 11th President of India (2002–
2007). Known as the "Missile Man of India" for his pivotal role 
in developing India's missile systems (Agni, Prithvi) and space
 programs (SLV-III), he was awarded the Bharat Ratna, India's 
highest civilian honor`;

Expression & Logic

we can perform arithmetic operation and ternary operators inside the ${} placeholder

const price = 100;
const tax = 0.2;

console.log(`Total: ${price * (1 + tax)}`); 

// Output: Total: $120
console.log(`Status: ${price < 150 ? "Expensive" : "Cheap"}`);
 
// Output: Status: Expensive
35 views