diff --git a/guide/english/javascript/es6/template-literals/index.md b/guide/english/javascript/es6/template-literals/index.md index c8001abff9..81ba8473ba 100644 --- a/guide/english/javascript/es6/template-literals/index.md +++ b/guide/english/javascript/es6/template-literals/index.md @@ -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 = ` @@ -37,31 +40,31 @@ const htmlMarkup = ` Hello World `; ``` -## 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 = ` `; ``` -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 = `
${data.name} lives in ${data.city}. ${data.birthyear ? `
He was born in the year ${data.birthyear}
`:''}
`; ``` -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.