Pour effectuer une interpolation de chaîne en Javascript, vous devez envelopper votre chaîne avec des backticks, puis votre variable avec des crochets et ajouter un signe dollar. Voici un exemple:
let name="Techozu";
let tagline = `Welcome to ${name}!`;
console.log(tagline)
// OUTPUT
// Welcome to Techozu!
Dans cet exemple, notre chaîne est entourée de backticks ` et notre variable name est entouré d’accolades {}. Précédant le $ key évaluera notre espace réservé dans la chaîne et donnera la réponse souhaitée.
Pourquoi utiliser l’interpolation de chaîne ?
Si vous souhaitez afficher une variable javascript directement dans une chaîne, vous souhaitez effectuer une interpolation de chaîne. L’interpolation de chaîne est une technique utilisée pour créer un balisage plus propre et plus lisible. C’est une bonne règle de considérer l’interpolation de chaînes lorsque vous vous retrouvez à effectuer une concaténation directe de chaînes. Regardons un exemple :
let customer="Bob"
let vehicle="Jeep Renegade"
let date="October 2nd"
let output="Our customer " + customer + ', purchased his ' + vehicle + ' on October 2nd.'
console.log(output)
// OUTPUT
// Our customer Bob, purchased his Jeep Renegade on October 2nd.
La version interpolée de la chaîne nettoyée ressemblerait à ceci :
let customer="Bob"
let vehicle="Jeep Renegade"
let date="October 2nd"
let output = `Our customer ${customer}, purchased his ${vehicle} on ${date}`
console.log(output)
// OUTPUT
// Our customer Bob, purchased his Jeep Renegade on October 2nd.
Le code modifié est plus court et beaucoup plus facile à lire en un coup d’œil.
Vos espaces réservés ne sont pas limités à de simples variables de chaîne. Ils exécutent également du javascript normal, ce qui signifie que vous pouvez y écrire du code JavaScript plus complexe. Prenons un exemple :
let colors = ['red','green','blue']
//Output random color
let output = `The color is ${colors[Math.floor(Math.random() * colors.length)]}`
console.log(output)
// OUTPUT
// The color is blue
Il n’est pas recommandé d’exécuter une logique JavaScript complexe directement dans vos chaînes. Déplacez la logique dans des variables distinctes pour rendre votre code plus robuste.
La chaîne différente en Javascript
Les chaînes en JavaScript peuvent être enveloppées de l’une des trois manières suivantes :
‘ Simple citation
let output="Hello from Techozu"
“ Double citation
let output = "Hello from Techozu"
` Tilde (backtick)
let output = `Hello from Techozu`
Celui que vous utiliserez dépendra principalement de votre chaîne. Si votre chaîne est un extrait de code HTML, vous pouvez utiliser des guillemets simples. Si vous avez beaucoup de guillemets simples dans votre chaîne, vous voudrez peut-être l’envelopper de guillemets doubles. Si vous devez effectuer une interpolation de chaîne avec un espace réservé, vous devez utiliser des backticks.
Comment échapper des chaînes en Javascript
Les chaînes peuvent être échappées en Javascript à l’aide de la barre oblique inverse \ clé. Vous pouvez même échapper à votre espace réservé en l’utilisant, comme ceci :
let name="Techozu";
let tagline = `Use a placeholder like this \${name}`;
console.log(tagline)
// OUTPUT
// Use a placeholder like this ${name}
D’autres fois, l’échappement de chaînes sera nécessaire lorsque votre caractère d’habillage de chaîne se trouve à l’intérieur de la chaîne elle-même. Par exemple, si vous avez entouré votre chaîne de guillemets simples mais que votre chaîne contient également des guillemets simples.
let tagline="Single quotes \" need to be escaped here';
console.log(tagline)
// OUTPUT
// Single quotes ' need to be escaped here
C’est tout ce qu’il y a à faire pour intégrer des variables dans vos chaînes à l’aide de l’interpolation de chaînes JavaScript. Utilisez ce modèle simple pour améliorer votre code.
Pour des guides utiles, des conseils, des astuces et bien plus encore, rendez-vous dans notre section de codage JavaScript.