Template Literals use back-ticks (` `) rather than the quotes (" ") to define a string

Quotes Inside Strings

With template literals, you can use both single and double quotes inside a string.

Multiline Strings

Template literals allows multiline strings

Interpolation

Template literals provide an easy way to interpolate variables and expressions into strings. The method is called string interpolation.

• Template literals allow variables in strings
• Template literals allow expressions in strings
• Automatic replacing of variables with real values is called string interpolation.

In JavaScript, template literals are a way to create strings that include expressions. They are enclosed by backticks (`) rather than single or double quotes. Expressions within template literals are denoted by a dollar sign and curly braces (${expression}).

Template literals also support multiline strings and string interpolation, making it more powerful than the traditional string concatenation way.

Normal Format

The Below code creates four variables: full_name, age, city, and role, and assigns them string values. Then it creates a variable called output and assigns it an empty string.

The output variable is then assigned a string which contains an HTML table, where the values of the full_name, age, city, and role variables are used to populate the table cells. The string uses the traditional string concatenation method to combine the static HTML table structure with the dynamic variable values.

ES5

In this example,the output variable is assigned a string that contains an HTML table, where the values of the full_name, age, city, and role variables are used to populate the table cells. The string uses the traditional string concatenation method to combine the static HTML table structure with the dynamic variable values.

This Code explain the output variable is first assigned an empty string and then the string is concatenated by using the + operator. The output variable starts with an <hr> tag and then it's followed by the table structure. This way the table will be separated with a horizontal line.You can insert this variable into an HTML element and it will be rendered as a table with the values inside the cells separated by horizontal line.

ES6

full_name, age, city, and role, and assigns them string values. Then it creates a variable called output and assigns it an empty string.

The output variable is then assigned a string which contains an HTML table, where the values of the full_name, age, city, and role variables are used to populate the table cells. This time, it uses the template literals feature of es6 to create the table. Template literals are enclosed by backticks (`) rather than single or double quotes. Expressions within template literals are denoted by a dollar sign and curly braces (${expression}).

In this example, the template literals is used to create the table structure, it starts with an <hr> tag and then it's followed by the table structure, where the values are inserted using the expressions inside the curly braces ${}.

In the second row of the table, the age value is compared with 25, if it's greater than 25, it will return "Good" otherwise "Bad" will be returned. This is a ternary operator that is being used to check the condition.

Source Code

let full_name="Tutor Joes";
let age="12";
let city="Salem";
let role="CEO Tutor Joes";

let output="";
output="<table border='1'><tr><th>Name</th><td>"+full_name+"</td></tr><tr><th>Age</th><td>"+age+"</td></tr><tr><th>City</th><td>"+city+"</td></tr><tr><th>Role</th><td>"+role+"</td></tr></table>";

//es5
output+="<hr><table border='1'>"+
"<tr><th>Name</th><td>"+full_name+"</td></tr>"+
"<tr><th>Age</th><td>"+age+"</td></tr>"+
"<tr><th>City</th><td>"+city+"</td></tr>"+
"<tr><th>Role</th><td>"+role+"</td></tr>"+
"</table>";

//es6
output+=`<hr>
<table border='1'>
  <tr><th>Name</th><td>${full_name}</td></tr>
  <tr><th>Age</th><td>${age>=25?"Good":"Bad"}</td></tr>
  <tr><th>City</th><td>${city}</td></tr>
  <tr><th>Role</th><td>${role}</td></tr>
</table>`;


document.body.innerHTML=output;

To download raw file Click Here

• Previous
• Next