JavaScript analogue de printf et String.Format : comment formater des chaînes comme un pro ?
Avez-vous déjà écrit un code JavaScript comme celui-ci ?
let name = 'Alexei';let age = 28;console.log('Bonjour, je m\'appelle ' + name + ' et j\'ai ' + age + ' ans.');Si oui — vous savez exactement à quel point c'est énervant. Ouvrir et fermer constamment des guillemets, mettre des plus, se perdre dans les espaces. Et si vous devez insérer 5-6 variables ? Un cauchemar !
Dans d'autres langages, ce problème a été résolu depuis longtemps. En Python, il y a f"Bonjour, {name}" et "%s %d" % (name, age). En C — le légendaire printf. En C# et Java — String.Format. Et en JavaScript ?
Spoiler : il existe une solution, et même plusieurs. Dans cet article, nous allons analyser toutes les méthodes de formatage de chaînes en JavaScript — des classiques aux modernes. Vous découvrirez quel analogue de printf en JavaScript choisir pour votre tâche, et vous oublierez à jamais la concaténation.
Pourquoi la question "JavaScript equivalent to printf/String.Format" est-elle si populaire ?
Sur Stack Overflow, cette question a recueilli des centaines de milliers de vues. Et ce n'est pas un hasard. Chaque développeur qui passe d'un autre langage à JavaScript cherche d'abord l'outil de formatage de chaînes familier.
Le problème est qu'en JavaScript pur, il n'y a pas d'analogue intégré de printf ou String.Format. Il n'y a que la concaténation (assemblage de chaînes avec +). Mais les développeurs ont trouvé plusieurs solutions élégantes, et nous allons les analyser.
Méthode 1 : Templates de chaînes (Template Literals) — le standard moderne
Depuis ES6 (2015), JavaScript dispose des templates de chaînes. C'est le meilleur analogue de printf et String.Format pour une utilisation quotidienne. Ils fonctionnent dans tous les navigateurs modernes et Node.js.
Syntaxe : on utilise des guillemets inversés ` au lieu des guillemets classiques, et on insère les variables avec ${}.
let name = 'Maria';let age = 25;let city = 'Moscou';
// Au lieu de la concaténationlet message = `Bonjour, je m'appelle ${name}, j'ai ${age} ans, je viens de ${city}.`;console.log(message); // Sortie : Bonjour, je m'appelle Maria, j'ai 25 ans, je viens de Moscou.Mais ce n'est pas tout ! À l'intérieur de ${}, on peut exécuter n'importe quelle expression JavaScript :
let a = 10;let b = 5;
console.log(`Somme : ${a + b}`); // Somme : 15console.log(`Plus grand ? ${a > b ? 'oui' : 'non'}`); // Plus grand ? ouiconsole.log(`Aléatoire : ${Math.random()}`); // Aléatoire : 0.4837...Pourquoi est-ce le meilleur analogue de printf en JavaScript ?
- Lisibilité — le code ressemble à du texte normal avec des insertions
- Sécurité — l'échappement se fait automatiquement
- Multiligne — on peut écrire du texte sur plusieurs lignes
- Expressions — on peut insérer les résultats de calculs
Templates de chaînes multilignes
let html = `<div class="card"> <h2>${title}</h2> <p>${description}</p></div>`;
console.log(html);// Sortie — un HTML soigné avec conservation des sauts de ligneComparez avec la concaténation — la différence est colossale !
Méthode 2 : Bibliothèque sprintf-js — le printf classique en JavaScript
Si vous êtes nostalgique du printf de C ou du formatage % de Python, vous avez une excellente option — la bibliothèque sprintf-js.
Installation via npm :
npm install sprintf-jsUtilisation :
const sprintf = require('sprintf-js').sprintf;const vsprintf = require('sprintf-js').vsprintf;
// Formatage simplelet result = sprintf('Bonjour, %s ! Tu as %d ans.', 'Ivan', 30);console.log(result); // Bonjour, Ivan ! Tu as