ES6 Lesson #4 - Template String

I think you often had a case when you need to connect a string with variables. With a template string, this will be much easier.

In the template line, you can immediately specify variables using the $ and {} signs, which is similar to vuejs or pug. Without having to break the line with +. To do this, use special quotation marks - `.

For example:

const yosipinvalera = "346 years"
const fujimisu = `im ${yosipinvalera} old`;

// fujimisu will returns "im 346 years old"


An even greater advantage of template strings is the ability to wrap them in multiple lines. For example:

function valeragoemail(to, from, subject, message) {
   console.log(`
     to: ${to}
     from: ${from}
     subject: ${subject}
     text message: ${message}
   `)
}

valeragoemail("valera@gmail.com", "yosip@gmail.com", "YOSIP", "Azazazaza u are idiot valera! VALERRRAAAAAAA")


Inside curly brackets you can call functions or using standard js operations.

let x = 5;
let y = 10;

console.log(`Price is ${x + y}`);
// returns Price is 15


console.log(`Price is ${parseInt('25') + parseInt('25')}`);
// returns Price is 50


Another big plus of template strings is tagging. With it, you can change the output of the content created by the function. This can be very useful if you have one template, but several options for its output.

let name = "Valera"
let name2 = "Yosip"

function upperName(stringText, variableName, variableName2) {
  console.log(stringText, variableName, variableName2) 
  // Will return  ["Hello my dear friend ", " and ", "", raw: Array(3)] "Valera" "Yosip"
  return stringText[0] + variableName.toUpperCase() + stringText[1] + variableName2.toUpperCase();
}

console.log(upperName`Hello my dear friend ${name} and ${name2}`) 

// Hello my dear friend VALERA and YOSIP

As we see in the example, to indicate a tag to a template string, you just need to put it in front of it. 

The tag itself takes several parameters. The first is the text of the template string (in the example, this is stringText), the second and the rest are variables.

The text string (stringText in example) is translated into an array, where each piece of text before and after the variables will be posted to the value of the array. Take a close look at the example above.


Now consider the case when you don't know how much variables in template string.

let name1 = "name1";
let name2 = "name2";
let name3 = "name3";
let name4 = "name4";
let name5 = "name5";
let name6 = "name6";
let name7 = "name7";

function upperName(stringText, ...values) {
  console.log(stringText, values)
  // will returns ["How much variables is here: ", " ", " ", " ", " ", " ", " ", " ", raw: Array(8)] (7) ["name1", "name2", "name3", "name4", "name5", "name6", "name7"]
}

console.log(upperName`How much variables is here: ${name1} ${name2} ${name3} ${name4} ${name5} ${name6} ${name7} `)

At first look, you see that this is the Spread Operator, which we examined in the previous lesson. But this is not entirely true. In this case, this is an innovation in the processing of functions, which will allow us to translate the remaining undefined values into an array.