Comment interpoler des variables dans des chaînes de caractères en JavaScript, sans concaténation?
je sais que dans PHP Nous pouvons faire quelque chose comme ceci:
$hello = "foo";
$my_string = "I pity the $hello";
sortie: "I pity the foo"
je me demandais si cette même chose était aussi possible en JavaScript. En utilisant des variables à l'intérieur des chaînes sans utiliser la concaténation - il semble plus concis et élégant à écrire.
10 réponses
à partir de Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge vous pouvez utiliser une fonctionnalité ES2015 / ES6 appelée Template Literals et utiliser cette syntaxe:
`String text ${expression}`
modèle littéral sont inclus par le back-tick ( ` ` ) (grave accent) au lieu de doubles ou simples guillemets.
exemple:
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.
c'est pas génial?
Bonus:
il permet également des chaînes multi-lignes en javascript sans échapper, ce qui est idéal pour les modèles:
return `
<div class="${foo}">
...
</div>
`;
prise en charge du Navigateur :
comme cette syntaxe n'est pas supportée par les navigateurs plus anciens (Internet Explorer et Safari <= 8), Vous pouvez utiliser Babel pour transférer votre code dans ES5 pour s'assurer qu'il fonctionnera partout.
Note complémentaire:
à partir de IE8+ vous pouvez utiliser le formatage de chaîne de base à l'intérieur de console.log :
console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.
avant Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no. Bien que vous pourriez essayer sprintf pour JavaScript pour obtenir à mi-chemin là:
var hello = "foo";
var my_string = sprintf("I pity the %s", hello);
Eh bien, vous pouvez le faire, mais ce n'est pas esp général
'I pity the $fool'.replace('$fool', 'fool')
vous pourriez facilement écrire une fonction qui fait cela intelligemment si vous aviez vraiment besoin de
si vous aimez écrire CoffeeScript vous pouvez le faire:
hello = "foo"
my_string = "I pity the #{hello}"
CoffeeScript est en fait javascript, mais avec une syntaxe bien meilleure.
pour un aperçu de CoffeeScript, cochez cette case Guide du débutant .
réponse complète, prête à l'emploi:
var Strings = {
create : (function() {
var regexp = /{([^{]+)}/g;
return function(str, o) {
return str.replace(regexp, function(ignore, key){
return (key = o[key]) == null ? '' : key;
});
}
})()
};
Appel
Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'});
pour l'attacher à une corde.prototype:
String.prototype.create = function(o) {
return Strings.create(this, o);
}
ensuite utiliser comme:
"My firstname is ${first}".create({first:'Neo'});
Vous pouvez utiliser cette fonction javascript pour faire ce genre de templating. Pas besoin d'inclure toute une bibliothèque.
function createStringFromTemplate(template, variables) {
return template.replace(new RegExp("\{([^\{]+)\}", "g"), function(_unused, varName){
return variables[varName];
});
}
createStringFromTemplate(
"I would like to receive email updates from {list_name} {var1} {var2} {var3}.",
{
list_name : "this store",
var1 : "FOO",
var2 : "BAR",
var3 : "BAZ"
}
);
Sortie : "I would like to receive email updates from this store FOO BAR BAZ."
utilisant une fonction comme argument à la chaîne.la fonction replace () faisait partie de la spécification ECMAScript v3. Voir . répondez pour plus de détails.
si vous essayez de faire une interpolation pour microtemplating, j'aime Moustache.js à cette fin.
j'ai écrit ce paquet npm stringinject https://www.npmjs.com/package/stringinject qui vous permet de faire ce qui suit""
var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]);
qui remplacera les {0} et {1} par les éléments du tableau et retournera la chaîne suivante
"this is a test string for stringInject"
ou vous pouvez remplacer les espaces réservés par des clés objet et des valeurs comme ceci:
var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });
"My username is tjcafferkey on Github"
ne voyez aucune bibliothèque externe mentionnée ici, mais Lodash a _.template() ,
https://lodash.com/docs/4.17.10#template
si vous faites déjà usage de la bibliothèque, il est intéressant de vérifier, et si vous ne faites pas usage de Lodash, vous pouvez toujours choisir des méthodes de la npm npm install lodash.template de sorte que vous pouvez réduire les frais généraux.
la forme la plus simple -
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'
Il y a aussi un tas d'options de configuration -
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'
j'ai trouvé les délimiteurs personnalisés très intéressants.