diff --git a/guide/english/javascript/es6/template-literals/index.md b/guide/english/javascript/es6/template-literals/index.md index 2949b8711c..b810cce17b 100644 --- a/guide/english/javascript/es6/template-literals/index.md +++ b/guide/english/javascript/es6/template-literals/index.md @@ -5,18 +5,18 @@ title: Template Literals ## Template Literals ## Introduction: -When we want to use variable to make a string, it becomes very painful as we have to use + sign to concatenate and keep track of quotes. +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. -Now with ES6,We can make string using backticks and using placeholders which are indicated with dollar sign and curly braces, like ${expression } . +Now with ES6, we can make the string using backticks. Then, insert the variable like this, ${variable}. ```javascript const name='John'; const city='London'; Older Style: -const sentence ='My name is '+ name +'. I live in '+city. +const sentence ='My name is '+ name +'. I live in '+ city. 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. +Here ${name} and ${city} are going to be interpolated by the variable name and city respectively. ``` ## MultiLine Strings: Older style: @@ -27,7 +27,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 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 const htmlMarkup = ` @@ -60,7 +60,7 @@ 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 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.