Comment interpoler des variables dans les chaînes de caractères en JavaScript, sans concaténation?

Je connais en PHP, nous pouvons faire quelque chose comme ceci:

$hello = "foo";
$my_string = "I pity the $hello";

De sortie: "I pity the foo"

Je me demandais si cette même chose est possible en JavaScript ainsi. À l'aide de variables à l'intérieur de chaînes sans utiliser la concaténation — il a l'air plus concise et élégante à écrire.

InformationsquelleAutor DMin | 2010-07-21

515

À partir de Firefox 34 /Chrome 41 /Safari 9 /Microsoft Bord, vous pouvez utiliser un ES2015 /ES6 fonctionnalité appelée Modèle De Littéraux et d'utiliser cette syntaxe:
```
`String text ${expression}`
```
Modèle de littéraux sont entourés par les arrière-tique (` `) (accent grave) au lieu de simple ou double quotes.

Exemple:
```
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
//"Fifteen is 15.
```
Comment bien c'est qu'?

Bonus:

Il permet également de multi-ligne de chaînes de caractères en javascript sans s'échapper, ce qui est excellent pour les modèles:
```
return `
    <div class="${foo}">
         ...
    </div>
`;
```
Prise en charge du navigateur:

Que cette syntaxe n'est pas pris en charge par les anciens navigateurs (Internet Explorer et Safari <= 8), vous souhaiterez peut-être utiliser Babel à transpile votre code dans l'ES5 pour vous assurer qu'il fonctionnera partout.

Note de côté:

À partir de IE8+, vous pouvez utiliser de base de la chaîne de mise en forme à l'intérieur de console.log:
```
console.log('%s is %d.', 'Fifteen', 15);
//Fifteen is 15.
```
- Ne manquez pas le fait que le modèle de chaîne est délimitée avec le retour des tiques (`) au lieu de normal de votre devis caractères. "${foo}" est littéralement ${foo} `${foo}` est ce que vous voulez vraiment
- Il y a aussi de nombreux transpilers à son tour ES6 dans l'ES5 résolu le problème de compatibilité!
- Incroyable réponse, merci beaucoup!!!
- quand je change de a ou b valeur. console.log(Fifteen is ${a + b}.); n'a pas changé de façon dynamique. il montre toujours les Quinze est de 15.
InformationsquelleAutor bformet
161

Avant Firefox 34 /Chrome 41 /Safari 9 /Microsoft Bord, non, ce n'était pas possible en javascript. Vous devez recourir à:
```
var hello = "foo";
var my_string = "I pity the " + hello;
```
- Il sera bientôt possible en javascript (ES6) avec les Chaînes du Modèle, voir ma réponse détaillée ci-dessous.
- C'est possible si vous aimez écrire CoffeeScript, qui EST en fait le javascript avec une meilleure syntaxe.
- Grand cri pour les anciens navigateurs 🙂
InformationsquelleAutor Sarfraz
40

Avant Firefox 34 /Chrome 41 /Safari 9 /Microsoft Bord, pas de. Bien que vous pouvez essayer sprintf pour JavaScript pour obtenir à mi-chemin:
```
var hello = "foo";
var my_string = sprintf("I pity the %s", hello);
```
- Merci. Si vous utilisez dojo, sprintf est disponible en tant que module: bill.dojotoolkit.org/api/1.9/dojox/string/sprintf
InformationsquelleAutor Justin Ethier
27

eh bien, vous pourriez faire, mais ce n'est pas esp général
```
'I pity the $fool'.replace('$fool', 'fool')
```
Vous pouvez facilement écrire une fonction qui fait cela de façon intelligente si vous avez vraiment besoin de
- Bon, mais j'imagine que il y aurait un gain de performance.
- Assez décent, en fait.
- Cette réponse est bonne quand vous avez besoin de stocker modèle de chaîne de caractères dans la base de données et des processus à la demande
InformationsquelleAutor Scott Evernden
9

Si vous aimez écrire CoffeeScript que vous pouvez faire:
```
hello = "foo"
my_string = "I pity the #{hello}"
```
CoffeeScript EST en fait en javascript, mais avec une bien meilleure syntaxe.

Pour un aperçu de CoffeeScript cochez cette guide du débutant.

InformationsquelleAutor bformet

Réponse complète, prête à être utilisée:

 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 à la Corde.prototype:

String.prototype.create = function(o) {
           return Strings.create(this, o);
}

Pour ensuite les utiliser comme :

"My firstname is ${first}".create({first:'Neo'});

InformationsquelleAutor momomo

9

Vous pouvez utiliser cette fonction javascript pour faire ce genre de templating. Pas besoin d'inclure une bibliothèque entière.
```
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."

À l'aide d'une fonction comme argument à la Chaîne.fonction de remplacement() faisait partie de l'ECMAScript v3 spec. Voir cette SORTE de réponse pour plus de détails.
- Est-ce efficace?
- L'efficacité dépendra en grande partie sur le navigateur de l'utilisateur, puisque cette solution délégués le "gros œuvre" de correspondant à l'expression rationnelle et en faisant de la chaîne de remplacement pour le navigateur de fonctions natives. En tout cas, depuis ce qui se passe sur le navigateur côté de toute façon, l'efficacité n'est pas une préoccupation majeure. Si vous souhaitez côté serveur de template (pour Node.JS ou similaire), vous devez utiliser l'ES6 modèle de littéraux solution décrite par @bformet, comme il est probablement plus efficace.
InformationsquelleAutor Eric Seastrand
4

Si vous essayez de faire de l'interpolation pour microtemplating, j'aime Mustache.js à cette fin.

InformationsquelleAutor Joe Martinez
3

J'ai écrit ce package npm stringinject https://www.npmjs.com/package/stringinject qui vous permet d'effectuer les opérations suivantes
```
var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]);
```
qui remplacera le {0} et {1}, avec les éléments de tableau et de retourner à la chaîne suivante
```
"this is a test string for stringInject"
```
ou vous pouvez remplacer les espaces réservés à l'objet des clés et des valeurs comme:
```
var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

"My username is tjcafferkey on Github" 
```
InformationsquelleAutor tjcafferkey
2

Ne vois pas de bibliothèques externes mentionnés ici, mais Lodash a _.template(),

https://lodash.com/docs/4.17.10#template

Si vous êtes déjà fait usage de la bibliothèque, il vaut la peine de vérifier, et si vous n'êtes pas faire usage de Lodash vous pouvez toujours cherry pick méthodes de mnp npm install lodash.template de sorte que vous pouvez couper les frais généraux.

Forme la plus simple -
```
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
//=> 'hello fred!'
```
Il y a un tas d'options de configuration aussi -
```
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
//=> 'hello mustache!'
```
J'ai trouvé personnalisé délimiteurs plus intéressant.

InformationsquelleAutor Mark Carpenter Jr

-1

String.prototype.interpole = function () {
    var c=0, txt=this;
    while (txt.search(/{var}/g) > 0){
        txt = txt.replace(/{var}/, arguments[c]);
        c++;
    }
    return txt;
}

Osu:

var hello = "foo";
var my_string = "I pity the {var}".interpole(hello);
//resultado "I pity the foo"

InformationsquelleAutor Abran Salas Molina

Vous devez vous connecter pour publier un commentaire.