gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved clarity of template literals (#29658)

Browse Source 
* Improved clarity of template literals
This commit is contained in:
Pratik Lodha
2019-02-07 18:31:59 +05:30
committed by Jaka Kranjc
parent 3d9eac9285
commit 08390807c8
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
guide/english/javascript/es6/template-literals/index.md
View File

@ -2,10 +2,10 @@
title: Template Literals
---
## Template Literals
# Template Literals
## Introduction:
When we want to use one or more variables to make a string, it becomes very painful as we have to use the + sign to concatenate and keep track of quotes.
## Introduction
When we want to use one or more variables to make a string, it becomes tedious as we have to use the '+' sign to concatenate and keep track of quotes.
Now with ES6, we can make the string using backticks. Then, insert the variable like this, `${variable}`.
@ -19,7 +19,10 @@ ES6 way:
const sentence = `My name is ${name}. I live in ${city}`;
Here ${name} and ${city} are going to be interpolated by the variable name and city respectively.
```
## MultiLine Strings:
The main advantage of using template literals is that it increases code readability.
## MultiLine Strings
Older style:
When we wanted to span our string into multiple lines, we had to use backslashes.
@ -28,7 +31,7 @@ const multipleLineString= "We have \
multiple lines \
here";
```
Now when we want to create a mutiline string, we can make use of template strings. We can surround our string with backticks. This approach is extremely helpful when we want to create some dynamic html markup.
Now when we want to create a multi-line string, we can make use of template strings. We can surround our string with backticks. This approach is extremely helpful when we want to create dynamic html markup.
```javascript
const htmlMarkup = `
<html>
@ -37,31 +40,31 @@ const htmlMarkup = `
<body>Hello World</body>
</html>`;
```
## Nesting of Template Strings:
## Nesting of Template Strings
We can nest them inside of each other.
```javascript
const cities =[
{name:'Delhi', year: 2010},
{name:'Mumbai', year: 2015},
{name:'Kolkata', year: 2017}];
{name:'Delhi', year: 2010},
{name:'Mumbai', year: 2015},
{name:'Kolkata', year: 2017},
];
const markup = `
<ul>
${cities.map(city=>`<li>I lived in ${city.name} in the year ${city.year}</li>`).join('')}
</ul>`;
```
Here the join operator after map function removes the extra commas which are added after each li.
The join operator after the `map` function removes the extra commas which are added after each `li`.
## If statements and Functions
We can also use If statements inside the template strings.
## If Statements and Functions
We can also use `if` statements inside the template strings.
```javascript
const data = {name: 'John', city: 'London', birthyear: 1900};
const markup = `<div>${data.name} lives in ${data.city}. ${data.birthyear ? `<div>He was born in the year ${data.birthyear}</div>`:''}</div>`;
```
In the example above, if birthyear is defined, then the div with contents "He was born in the year" is generated otherwise there would be no div created.
In the example above, if `birthyear` is defined, then the `div` with contents "He was born in the year" is generated otherwise there would be no `div` created.
We can also call functions inside the template strings.