The specific use of template strings in ES6

This article brings you relevant knowledge about javascript, which mainly introduces the specific use of template strings in ES6, mainly analyzing the relevant content of template strings based on the code, as follows Let's take a look, I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

Recently used in projects ES6 template strings are summarized here.

1. Previously we could also use JavaScript to output template strings, usually as follows:

$("#result").append(
    "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
    );

But we can see that this traditional approach requires the use of a large number of "" (double Quotation marks) and splicing to get the template we need. But this is very inconvenient.

So ES6 provides template strings, marked with ` (backtick), and variables enclosed with ${}. The above example can be written as follows using a template string:

$("#result").append(
  `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
    );

This approach is much simpler, and we no longer need to use a large number of "" and to splice strings and variables.

2. Of course, variables can be introduced into the template string, and it is also possible not to use variables. As shown below:

` I am a man.`

` No matter what you do,

I trust you.` 　

3. We can also define variables first and then embed the variables in the template string:

var name="zzw";
` ${name},no matter what you do,
 I trust you.`

4. Obviously, since the backtick is the identifier of the template string, if we need to use Backticks, we need to escape them, as shown below:

`No matter\` what you do,
I trust you.`

5. Note: If you use template strings to represent multi-line strings, all spaces and indents will be saved in the output! !

console.log( `No matter\` what you do,
 I trust you.`);

The output result is as follows:

#6. You can put any JavaScript expression in the curly brackets in ${}, and you can also perform operations. , and reference object properties.

var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);

The result is as follows:

#7. Even more powerful is: the template string can also call functions:

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯，${string()}`);

Result As shown below:

#In addition, if the result of the function is not a string, it will be converted into a string according to the general rules:

function string(){
    return 666;
  }
  console.log(`你想说什么? 嗯，${string()}`);

The result is as follows Shown:

Here, the number 666 is actually converted into the string 666.

8. If the variable in ${} If it is not named, an error will be reported:

console.log(`你想说什么? 嗯，${string()}`);

In the above code, the string() function is not declared, so an error will be reported:

9. In fact , we can also enter a string in ${}, and the knowledge result will still return a string:

console.log(`你想说什么?嗯，${"其实我不是变量~"}`);

The result is as follows:

10. If you want to quote the template string itself, you can write it like this:

let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
 console.log(func("zzw"));

The result is as follows:

[Related recommendations: javascript video Tutorial、web front-end】

The above is the detailed content of The specific use of template strings in ES6. For more information, please follow other related articles on the PHP Chinese website!