Récemment, j'ai 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èle, généralement comme suit :
$("#result").append(
"Il est <b>"+person.name+"</b>"+"et nous souhaitons connaître son"+person.age+.C'est tout"
); Mais nous pouvons voir que cette approche traditionnelle nécessite d'utiliser beaucoup de "" (guillemets doubles) et + pour les assembler afin d'obtenir le modèle dont nous avons besoin. Mais c'est très gênant.
Ainsi, ES6 fournit des chaînes de modèle, qui sont marquées par ` (backtick) et les variables sont entourées de ${}. L'exemple ci-dessus peut être écrit comme suit à l'aide de chaînes de modèle :
$("#result").append(
`Il s'appelle <b>${person.name></b> et nous souhaitons connaître son${person.age}. c'est tout`
); 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, des variables peuvent être introduites dans la chaîne du modèle, 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 les variables, puis les intégrer dans la chaîne du modèle :
var name="zzw";
` ${name}, peu importe ce que tu fais,
Je te fais confiance.` 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 suit :
`Peu importe` ce que vous faites,
Je vous 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( `Peu importe` ce que vous faites, Je te fais confiance.`);
Le résultat est le suivant :
6. Vous pouvez mettre n'importe quelle expression JavaScript entre accolades dans ${}, effectuer des opérations et référencer les propriétés de l'objet.
variable x=88 ;
variable 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 également appeler des fonctions :
function string(){
return "zzw aime es6!";
}
console.log(`Que veux-tu dire ? Eh bien, ${string()}`); Le résultat est le suivant :
De plus, si le résultat de la fonction n'est pas une chaîne, il sera converti en chaîne selon les règles générales :
function string(){
renvoie 666 ;
}
console.log(`Que veux-tu dire ? Eh bien, ${string()}`); Le résultat est le suivant :
Ici, le nombre 666 est en fait converti en chaîne 666.
8. Si la variable dans ${} n'est pas nommée, une erreur sera signalée :
console.log(`Que voulez-vous dire ? Eh bien, ${string( )}`); Dans le code ci-dessus, la fonction string() n'est pas déclarée, donc une erreur est signalée :
9. En fait, nous pouvons également saisir une chaîne dans ${}, et le résultat de la connaissance renverra toujours une chaîne :
console.log(`Que veux-tu dire ? Eh bien, ${"En fait, je ne suis pas une variable ~"}`) ; Le résultat est le suivant :
10. Si vous souhaitez référencer la chaîne du modèle elle-même, vous pouvez l'écrire comme ceci :
let str="return"+"`Hello ! ${name}`";
let func=new Function("nom",str);
console.log(func("zzw")); Les résultats sont les suivants :
