How to use ES6 template strings-JS Tutorial-php.cn

How to use ES6 template strings

php中世界最好的语言

Release： 2018-05-29 10:12:24

Original

1354 people have browsed it

This time I will show you how to use ES6 templatesStrings, what are the precautions when using ES6 template strings, the following is a practical case, let's take a look.

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

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

Copy after login

But we can see: Such a traditional approach requires the use A lot of "" (double quotes) and splicing can 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`
    );

Copy after login

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 the variable first, and then embed the variable in the template string:

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

Copy after login

4. Obviously, since the backtick is the identifier of the template string, if we If we need to use backticks in the string, 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.`);

Copy after login

The output result is as follows:

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

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

Copy after login

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()}`);

Copy after login

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()}`);

Copy after login

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()}`);

Copy after login

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(`你想说什么?嗯，${"其实我不是变量~"}`);

Copy after login

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"));

Copy after login

The result is as follows:

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!