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

Improved wording (#24225)

Browse Source
This commit is contained in:
Nick Haras
2018-12-10 01:57:40 +02:00
committed by Manish Giri
parent 82531c5fcc
commit fab4d1401e
1 changed files with 68 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,67 +1,68 @@
--- ---
title: Template Literals title: Template Literals
--- ---
## Template Literals ## Template Literals
## Introduction: ## Introduction:
When we want to use a variable to make a string, it becomes very painful as we have to use a + sign to concatenate and keep track of quotes. 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.
Now with ES6, we can make the string using backticks. Then, insert the variable like this, ${variable}. Now with ES6, we can make the string using backticks. Then, insert the variable like this, `${variable}`.
```javascript
const name='John'; ```javascript
const city='London'; const name='John';
const city='London';
Older Style:
const sentence ='My name is '+ name +'. I live in '+ city. Older Style:
ES6 way: const sentence ='My name is '+ name +'. I live in '+ city.
const sentence = `My name is ${name}. I live in ${city}`; ES6 way:
Here ${name} and ${city} are going to be interpolated by the variable name and city respectively. 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: ```
Older style: ## MultiLine Strings:
Older style:
When we wanted to span our string into multiple lines, we had to use backslashes.
```javascript When we wanted to span our string into multiple lines, we had to use backslashes.
const multipleLineString= "We have \ ```javascript
multiple lines \ const multipleLineString= "We have \
here"; 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. ```
```javascript 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.
const htmlMarkup = ` ```javascript
<html> const htmlMarkup = `
<head></head> <html>
<title>Template string</title> <head></head>
<body>Hello World</body> <title>Template string</title>
</html>`; <body>Hello World</body>
``` </html>`;
## Nesting of Template Strings: ```
We can nest them inside of each other. ## Nesting of Template Strings:
```javascript We can nest them inside of each other.
const cities =[ ```javascript
{name:'Delhi', year: 2010}, const cities =[
{name:'Mumbai', year: 2015}, {name:'Delhi', year: 2010},
{name:'Kolkata', year: 2017}]; {name:'Mumbai', year: 2015},
{name:'Kolkata', year: 2017}];
const markup = `
<ul> const markup = `
${cities.map(city=>`<li>I lived in ${city.name} in the year ${city.year}</li>`).join('')} <ul>
</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. ```
Here the join operator after 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}; ```javascript
const markup = `<div>${data.name} lives in ${data.city}. ${data.birthyear ? `<div>He was born in the year ${data.birthyear}</div>`:''}</div>`; 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.
We can also call functions inside the template strings.