Introduction aux modèles de littéraux.

La manipulation de chaînes est une tâche très courante en programmation, en particulier lors de la création d'applications Web interactives. Si vous avez déjà travaillé avec JavaScript, vous avez probablement dû mettre certaines variables dans des chaînes.
Dans les anciennes versions de JavaScript, cela signifiait utiliser l'opérateur pour joindre des chaînes via un processus appelé concaténation de chaînes. Cependant, avec l'introduction des littéraux de modèle dans la mise à jour JavaScript ES6 (2015). Nous disposons désormais d'un moyen plus simple d'insérer des variables dans des chaînes, appelé interpolation de chaîne.

Que sont les littéraux de modèle ?

Les littéraux de modèle nous permettent de manipuler les chaînes plus facilement. Ils sont entourés de guillemets (`) plutôt que (') ou ("), et ils prennent en charge l'interpolation de chaîne en utilisant la syntaxe (${}) pour placer des variables ou des appels de fonction directement dans une chaîne.

Voici un exemple de la façon dont les littéraux de modèle simplifient l'interpolation de chaînes.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

Avantages de l'utilisation de modèles littéraux

1. Lisibilité améliorée

Lors de l'utilisation de la concaténation de chaînes, il était facile de se perdre dans un tas de signes, surtout lorsque l'on travaillait avec des chaînes plus longues. Les littéraux de modèle évitent cela en vous permettant d'écrire des chaînes d'une manière plus facile à suivre.

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. Chaînes multilignes

Avant les littéraux de modèle, vous deviez utiliser des caractères d'échappement comme \n pour créer des chaînes multilignes. Vous pouvez maintenant les écrire dans des backticks(`).

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. Évaluation des expressions

Vous pouvez également effectuer des calculs, appeler des fonctions ou manipuler des données à l'intérieur de chaînes.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

Cas d'utilisation courants en JavaScript

1. Génération HTML

Au lieu de créer des chaînes HTML avec concaténation, vous pouvez placer des variables directement dans la chaîne avec interpolation.

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. Messages de journalisation

Vous pouvez également insérer des variables directement dans les messages du journal sans avoir besoin de concaténation.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. Création d'URL

Les littéraux de modèle facilitent également la création d'URL.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. Logique conditionnelle

Un autre excellent cas d'utilisation est la Logique conditionnelle. Avec les littéraux de modèle, vous pouvez donner des conditions simples aux chaînes à l'aide de l'opérateur ternaire (? :), qui est un raccourci pour une condition if-else.
Opérateurs logiques comme && (et) ou || (ou) peut également être utilisé pour ajouter des parties conditionnelles à une chaîne. Cela supprime le besoin d'instructions if-else supplémentaires ou le besoin de concaténation.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

Vous pouvez également ajouter des expressions plus complexes dans les littéraux de modèle.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

Conclusion

Les littéraux de modèle en JavaScript offrent un moyen plus propre et plus efficace de gérer l'interpolation de chaînes. Entre la création de contenu Web, la journalisation de messages ou la création de code plus lisible, cette méthode offre la flexibilité dont vous avez besoin.

La prochaine fois que vous jonglerez avec des variables et des chaînes, essayez d'utiliser des littéraux de modèle. Vous comprendrez rapidement pourquoi c'est ma méthode de prédilection pour travailler avec JavaScript.

Ressources

1. MDN Web Docs - Littéraux de modèles
2. GitHub - Laboratoire de révision des chaînes de phase 1
3. Écoles W3 - Chaînes de modèles JavaScript