Notions de base angulaires : littéraux de modèles JavaScript

Les modèles littéraux sont des chaînes qui permettent de créer facilement des chaînes multilignes, une interpolation de chaînes et même des fonctions personnalisées. Nous allons jeter un coup d’oeil!

Les littéraux de modèle sont des littéraux délimités par des backticks (``). Les modèles littéraux ont été introduits dans ECMAScript6. Ce sont des chaînes avec les mêmes méthodes que les chaînes régulières (délimitées par '' ou alors "").

let icecreamFlavour = `Strawberry`;

typeof icecreamFlavour;         			
icecreamFlavour.length;         			
icecreamFlavour.toUpperCase();  	

Crédit image : @Dakar_Jaxtyn

De plus, les modèles littéraux résolvent les problèmes que nous avions avec les chaînes antérieures à ECMAScript6. Les littéraux de modèle fournissent :

• Un moyen facile de créer des chaînes multilignes
• Interpolation de chaîne

Nous pouvons également étiqueter les littéraux de modèle avec des fonctions personnalisées et fournir la logique pour analyser nous-mêmes les littéraux de modèle.

Examinons chaque fonctionnalité à tour de rôle.

Chaînes multilignes

Depuis l’introduction des modèles littéraux dans ECMAScript 6, la création de chaînes multilignes est extrêmement simple. Tous les espaces à l’intérieur des backticks dans un littéral de modèle sont honorés dans le cadre de la chaîne. Cela inclut les nouvelles lignes et les tabulations sans saisie explicite
\n ou alors \t.

Ceci est particulièrement pratique lorsque nous voulons définir du code dans une chaîne car nous pouvons utiliser l’espace et l’indentation pour écrire du code facile à lire.

Par exemple, Angular nous permet de définir le modèle et les styles d’un composant dans un fichier séparé ou directement dans le @Component décorateur. Les développeurs préfèrent souvent conserver le code HTML et CSS du composant dans le fichier component.ts afin qu’ils puissent voir tout le code du composant au même endroit et éviter de passer d’un fichier à l’autre.

@Component({  
    template: `  
        <h2>Icecream Orders</h2>  
  
        <ul>  
            <li *ngFor="let flavour of flavours">  
                {{ flavour }}  
            </li>  
        </ul>
    `,  
    styles: [`
        h2 {
	      background-color: lightgray;
	      padding: 5px 10px;
	    }
    `]
})  
class OrdersComponent {  
  flavours = [
	  'Liquorice and Blackcurrent', 
	  'Stem Ginger', 
	  'Lemon Meringue'
  ];
}

C’est un jeu d’enfant de créer des chaînes multilignes à l’aide de littéraux de modèle – nous tapons simplement notre chaîne avec tous les espaces dont nous avons besoin dans les backticks (``) .

Notez également que nous n’avons pas besoin d’échapper les guillemets doubles ou simples dans les backticks, mais nous devons échapper tous les backticks dans un littéral de modèle.

let tip = `The \`<h1>\` tag is used for 'Heading 1'.`;

console.log(tip);   


The `<h1>` tag is used for 'Heading 1'.

Avant que les modèles littéraux ne soient disponibles, nous ne pouvions utiliser que des chaînes de création à l’aide de guillemets simples ou de guillemets doubles qui devaient être contenus sur une seule ligne. Pour créer des chaînes multilignes à l’aide d’un guillemet simple ou double, nous devons ajouter le caractère barre oblique inverse (
\) à la fin de chaque ligne de la chaîne.

let order = 'Pistachio \
    Chocolate and Mint \
    Matcha';

console.log(order);


Pistachio     Chocolate and Mint     Matcha

Le \ caractère nous permet de taper la chaîne sur plusieurs lignes. Pour imprimer sur une nouvelle ligne, nous devons inclure \n ainsi que.

let order2 = 'Pistachio \n\
    Chocolate and Mint \n\
    Matcha';

console.log(order2);


Pistachio   
Chocolate and Mint   
Matcha

Ou bien, utilisez la concaténation de chaînes (+) pour taper la chaîne sur plusieurs lignes et inclure \n pour les nouvelles lignes.

let order1 = 'Bubble Gum \n' +
    'Peanut Butter Jelly\n' +
    'Cotton Candy';

console.log(order1);


Bubble Gum   
Peanut Butter Jelly  
Cotton Candy

Nous avons maintenant vu qu’il est vraiment facile de créer des chaînes multilignes avec des littéraux de modèle. Voyons à quel point il est facile de combiner les sorties d’expressions en chaînes à l’aide de littéraux de modèle.

Interpolation de chaîne

La meilleure partie des littéraux de modèle doit être l’interpolation de chaîne. Nous pouvons mettre n’importe quelle expression JavaScript valide dans le modèle littéral en utilisant le « ${ » comme délimiteur d’ouverture et « } » comme délimiteur de fermeture, comme ceci : ${expression}. L’expression est évaluée et le résultat est concaténé à la chaîne de chaque côté.

On peut penser à la ${expression} comme espace réservé pour la valeur de l’expression lorsque nous définissons le modèle littéral. Lorsque le code est exécuté au moment de l’exécution, l’expression est évaluée et sa valeur résultante est substituée dans la chaîne à la place de l’espace réservé. Espace réservé, substitution et interpolation de chaîne en sont les synonymes.

L’exemple de code suivant illustre cela :

• Les substitutions peuvent être n’importe quelle expression JavaScript valide, y compris les appels de fonction.
• Les littéraux de modèle peuvent accéder aux variables qui se trouvent dans la portée.
• Essayer d’accéder à une variable qui n’existe pas dans la portée génère une erreur.

let order = [  
    { scoops: 1, flavour: 'Maple Wallnut' },   
    { scoops: 1, flavour: 'Buttered Pecan' },   
    { scoops: 1, flavour: 'Coconut Bounty' }  
];

let numberOfScoops = order.reduce((prev, cur) => prev + cur.scoops, 0);

let receipt = `${numberOfScoops}:   
    ${order[0].scoops} ${order[0].flavour}   
    ${order[1].scoops} ${order[1].flavour}   
    ${order[2].scoops} ${order[2].flavour}`;

console.log(receipt);


3 scoops:   
    1 Maple Wallnut   
    1 Buttered Pecan   
    1 Coconut Bounty

console.log(`Flavours Available: {flavours}`);


Uncaught ReferenceError: flavours is not defined

Littéraux de modèle d’imbrication

Nous pouvons imbriquer des littéraux de modèle dans un littéral de modèle.

Par exemple, au lieu de coder en dur l’accès aux saveurs de crème glacée à partir du tableau de commande, nous pouvons utiliser le tableau map() méthode pour créer un littéral de modèle imbriqué pour chaque saveur de crème glacée dans la commande.

J’ai d’abord pensé à utiliser forEach()toutefois forEach() Retour undefined tandis que map() renvoie un tableau de valeurs transformées. Après le mappage, nous pouvons joindre notre gamme de saveurs de crème glacée avec un littéral de modèle qui a une nouvelle ligne et une indentation – pour le formatage.

let order = [  
    { scoops: 2, flavour: 'White Chocolate' },  
    { scoops 1, flavour: 'Rum and Raisin'}

];

let numberOfScoops = order.reduce((prev, cur) => prev + cur.scoops, 0);

let receipt = `${numberOfScoops} ${ numberOfScoops > 1 ? 'scoops' : 'scoop' }:   
    ${order  
      .map((item) => **`${item.scoops} ${item.flavour}`**)  
      .join(`  
    `)}  
`;

console.log(receipt);


"3 scoops:   
    2 White Chocolate  
    1 Rum and Raisin  
"

Notez que nous pouvons choisir conditionnellement l’expression à interpoler dans notre littéral de modèle. Dans le code ci-dessus, nous avons utilisé l’opérateur ternaire pour afficher la forme plurielle ou singulière de « scoop » en fonction du nombre de boules de crème glacée.

Comme nous le voyons, l’interpolation de chaînes est également un jeu d’enfant avec les modèles littéraux ! Ensuite, regardons comment fournir notre propre fonction pour analyser les littéraux de modèle.

Modèles balisés

Nous pouvons étiqueter un modèle littéral avec une fonction qui définit comment analyser le modèle littéral. La fonction reçoit un tableau des littéraux de chaîne du littéral modèle comme premier paramètre et les valeurs interpolées dans le littéral modèle comme arguments supplémentaires. La fonction n’a pas besoin d’être appelée tag – il peut s’agir de n’importe quel nom reflétant l’objectif de la fonction.

function tag(literals, ...values) {
  console.log(literals); 
  console.log(values);   
}

userName = 'Arlo';
let greeting = tag`Hi, ${userName}!`;






greeting = tag`Hi, ${userName}`; 

Nous pouvons voir que le premier paramètre de la fonction tag est un tableau contenant les littéraux de chaîne du modèle littéral, y compris tout espace. Si le modèle littéral se termine par un ${} placehoder, alors le dernier élément du tableau des littéraux est une chaîne vide "". De cette façon, le tableau des littéraux est un plus long que le tableau des valeurs.

Si nous devions répéter ce que fait la fonction littérale de modèle par défaut, nous ferions quelque chose comme le code suivant :

function parse(literals, ...values) {
  let result = '';
  
  values.forEach((value, index) => {
    result += literals[index];
    result += value;
  })
  
  let literalsLength = literals.length;
  let valuesLength = values.length;
  
  if (literalsLength > valuesLength) {
    result += literals[literalsLength - 1];
  }
  
  return result;
}

userName = 'Arlo';
let greeting = parse`Hi, ${userName}!`;
console.log(greeting); 

J’ai du mal à penser à un bon cas d’utilisation pour les modèles balisés, car nous pouvons faire beaucoup avec les littéraux de modèle par défaut. Par exemple, si nous voulons transformer les chaînes en majuscules, nous pouvons utiliser le toUpperCase() méthode, nous pouvons appeler une fonction pour calculer le coût total, etc.

Au lieu de cela, nous pouvons examiner des exemples concrets de cas d’utilisation de modèles balisés :

Lectures complémentaires

Pour en savoir plus, veuillez vous référer à ces livres brillants :