Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser les chaînes de modèles ES6

php中世界最好的语言
Libérer: 2018-05-29 10:12:24
original
1418 Les gens l'ont consulté

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" 
    );
Copier après la connexion

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`
    );
Copier après la connexion

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.`
Copier après la connexion

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.`);
Copier après la connexion

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}`);
Copier après la connexion

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()}`);
Copier après la connexion

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()}`);
Copier après la connexion

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()}`);
Copier après la connexion

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(`你想说什么?嗯,${"其实我不是变量~"}`);
Copier après la connexion

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"));
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal