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 = `