Insérer une variable dans une chaîne JavaScript

Pour insérer la valeur d’une variable dans une chaîne JavaScript, utilisez un littéral de gabarit : délimitez le texte par des accents graves et placez la forme exacte `${variableName}` à l’endroit où la valeur doit apparaître. Remplacez variableName par le nom de votre variable ; JavaScript y insère sa valeur actuelle. Les littéraux de gabarit conviennent à la plupart des constructions de chaînes. Les espaces réservés de la console sont pratiques pour les journaux, tandis qu’une bibliothèque de formatage peut être utile si ses fonctionnalités justifient une dépendance.

Utiliser des littéraux de gabarit pour insérer une variable dans une chaîne dans JavaScript

Les littéraux de gabarit utilisent des accents graves plutôt que des guillemets simples ou doubles. JavaScript évalue l’expression comprise entre ${ et }, puis convertit son résultat en chaîne. Vous pouvez affecter la chaîne obtenue à une variable, la renvoyer depuis une fonction ou la transmettre à une autre fonction. Dans une chaîne entre guillemets, comme "Hello, ${name}", la syntaxe d’interpolation reste du texte littéral : les guillemets simples et doubles n’interpolent pas les valeurs.

Cet exemple construit une salutation et calcule un total avant d’affecter le texte obtenu à message :

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

L’expression ${price + 3} est d’abord évaluée et fournit donc 15 ; le signe dollar qui la précède immédiatement est du texte ordinaire. Une expression peut contenir un calcul, un accès à une propriété ou un appel de fonction. Veillez à ce qu’elle reste assez courte pour que la phrase obtenue soit facile à comprendre. Un littéral de gabarit peut s’étendre sur plusieurs lignes, et les guillemets qu’il contient n’ont pas besoin d’être échappés. Pour inclure littéralement la séquence ${, échappez le signe dollar avec \${ ; pour inclure un accent grave, précédez-le d’une barre oblique inverse. Si une expression produit un objet, JavaScript applique la conversion de cette valeur en chaîne, qui peut ne pas donner la représentation souhaitée ; choisissez une conversion explicite pour afficher les données de l’objet lisiblement. L’interpolation crée du texte brut, pas une sortie HTML sécurisée. Pour afficher sur une page Web des valeurs non fiables, utilisez une API DOM sûre et adaptée au contexte.

Utiliser la mise en forme de base pour insérer une variable dans une chaîne dans JavaScript

Pour afficher des informations de diagnostic, console.log() peut formater un message à l’aide d’espaces réservés suivis d’arguments. Dans cet exemple, %s formate le nom et %d le score ; les arguments sont fournis dans le même ordre :

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

La prise en charge des espaces réservés et les règles de conversion dépendent de l’implémentation de la console. Il s’agit donc d’une facilité de journalisation, pas d’une API portable de construction de chaînes. console.log() écrit des informations de diagnostic et ne renvoie pas le message formaté pour l’affecter à une variable ou l’insérer dans une page HTML. Si vous avez besoin d’une valeur de chaîne, utilisez un littéral de gabarit ou une bibliothèque de formatage. Faites correspondre les arguments à leurs espaces réservés dans le bon ordre : selon la console, les arguments supplémentaires ou les espaces réservés sans valeur correspondante peuvent s’afficher différemment.

Utilisez sprintf() pour insérer une variable dans une chaîne en JavaScript

sprintf-js est une bibliothèque facultative dont la fonction sprintf() renvoie une chaîne. Dans un projet où le paquet est installé et où CommonJS est disponible, vous pouvez le charger avec const { sprintf } = require("sprintf-js");, puis créer une valeur avec const message = sprintf("%s has %d items", name, count);. Ces lignes illustrent l’API ; l’installation du paquet et les imports dépendent de l’environnement du projet. Pour un projet dans un navigateur ou fondé sur des modules, suivez les instructions de configuration du projet lié.

sprintf() interprète les directives de format et les arguments fournis ; elle n’évalue pas les expressions JavaScript écrites dans la chaîne de format. Chaque directive utilise un argument correspondant. Choisissez cette bibliothèque si ses options de formatage facilitent des mises en forme répétées ou plus élaborées et justifient l’ajout d’une dépendance. La documentation du projet présente les directives disponibles et les options de configuration. Pour une seule phrase courte contenant une variable, la syntaxe intégrée des littéraux de gabarit est généralement plus simple.

Conclusion

Utilisez les littéraux de gabarit pour construire des chaînes ordinaires, y insérer des valeurs et intégrer des expressions JavaScript. Réservez les espaces réservés de console.log() aux informations de diagnostic, en gardant à l’esprit que leur comportement varie selon l’implémentation et que l’appel ne produit pas de chaîne formatée réutilisable. Envisagez sprintf-js lorsque ses fonctionnalités de formatage justifient l’ajout de cette dépendance. Pour une interpolation simple, les accents graves et ${...} restent généralement le moyen le plus clair d’insérer la valeur actuelle d’une variable dans une chaîne JavaScript.