Comment utiliser les chaînes de modèles ES6

Cette fois, je vais vous montrer comment utiliser les modèles ES6 chaînes et quelles sont les précautions d'utilisation des chaînes de modèles ES6. Voici des cas pratiques, jetons un coup d'oeil.

1. Auparavant, nous pouvions également utiliser JavaScript pour générer une chaîne de modèle, généralement comme ceci :

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

Mais nous pouvons voir : cette approche traditionnelle nous devons utilisez beaucoup de "" (guillemets doubles) et + pour assembler afin d'obtenir le modèle dont nous avons besoin. Mais c'est très gênant.

ES6 fournit donc des chaînes de modèle, marquées par ` (backtick) et des variables 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, 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 la variable d'abord , puis intégrer la variable 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 du. chaîne de modèle, si nous devons utiliser des guillemets dans une chaîne, nous devons y échapper, comme ceci :

`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( `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 dans ${}. , vous pouvez également effectuer des opérations et référencer les propriétés des objets.

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

Le résultat est le suivant :

7. Ce qui est encore plus puissant, c'est : la chaîne de modèle peut également appeler des fonctions :

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, il sera converti en chaîne selon le règles générales :

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

Le résultat est le suivant :

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

8. If in $ Si les variables dans {} ne sont pas nommées, 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 être signalé :

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

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

Le résultat est le suivant :

10. Si vous souhaitez citer la chaîne du modèle 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 :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Comment implémenter des événements personnalisés à sélection multiple dans les mini-programmes WeChat

Comment créer- réagir- L'application est modifiée pour prendre en charge plusieurs pages

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!