L'utilisation spécifique des chaînes de modèles dans ES6

Cet article vous apporte des connaissances pertinentes sur javascript Il présente principalement l'utilisation spécifique des chaînes de modèles dans ES6. Il analyse principalement le contenu pertinent des chaînes de modèles en fonction du code. tout le monde.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

J'ai récemment utilisé des chaînes de modèles ES6 dans mon projet, qui sont résumées ici.

1. Auparavant, nous pouvions également utiliser JavaScript pour générer des chaînes de modèles, généralement comme suit :

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

Mais nous pouvons voir qu'une telle approche traditionnelle nécessite qu'un grand nombre de "" (guillemets doubles) et + soient assemblés. pour obtenir le modèle dont nous avons besoin. Mais c'est très gênant.

ES6 fournit donc des chaînes de modèles, qui sont marquées d'un ` (backtick) et les variables sont entourées de ${}. L'exemple ci-dessus peut être écrit comme suit en utilisant des chaînes de modèle :

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

Cette approche est beaucoup plus simple. Nous n'avons plus besoin d'utiliser beaucoup de "" et + pour assembler des chaînes et des variables.

2. Bien entendu, les chaînes de modèles peuvent introduire des variables, et il est également possible de ne pas utiliser de variables. Comme indiqué ci-dessous :

` Je suis un homme.`

` Peu importe ce que vous faites,

Je vous fais confiance.`

3. Nous pouvons également définir d'abord des variables, puis intégrer les variables dans la chaîne du modèle. :

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

4. Évidemment, puisque le backtick est l'identifiant de la chaîne du modèle, si nous devons utiliser le backtick dans la chaîne, nous devons l'échapper, comme indiqué ci-dessous :

`Peu importe` ce que vous faites. ,
Je te fais confiance.`

5. Remarque : Si vous utilisez des chaînes de modèle pour représenter des chaînes multilignes, tous les espaces et retraits seront enregistrés dans la sortie ! !

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

Le résultat de sortie est le suivant :

6 Vous pouvez mettre n'importe quelle expression JavaScript entre accolades entre ${}, effectuer des opérations et référencer les propriétés de l'objet.

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

Le résultat est le suivant :

7. Encore plus puissant : la chaîne modèle peut aussi appeler la fonction :

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

Le résultat est le suivant :

De plus, si le résultat de la fonction n'est pas une chaîne , alors, elle sera convertie en chaîne selon les règles générales :

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

Le résultat est le suivant :

Ici, en fait le nombre 666 est converti en chaîne 666.

8. If in ${} Si les variables dans ne sont pas nommées, alors une erreur sera signalée :

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

Dans le code ci-dessus, la fonction string() n'est pas déclarée, donc une erreur sera signalée :

9. En fait, on peut aussi saisir dans ${} Une chaîne, le résultat de la connaissance renverra toujours une chaîne :

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

Le résultat est le suivant :

10. chaîne elle-même, vous pouvez l'écrire comme ceci :

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

Le résultat est le suivant :

【Recommandations associées : tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!