Comment puis-je faire l'interpolation de chaîne dans JavaScript?

tl; dr

utilisez les caractères littéraux du modèle de chaîne de caractères ECMAScript 2015, s'il y a lieu.

explication

il n'y a pas de façon directe de le faire, comme selon les spécifications D'ECMAScript 5, mais ECMAScript 6 A template strings , qui étaient également connus comme quasi-littérales lors de la rédaction de la spécification. Utilisez - les comme ceci:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

vous pouvez utiliser n'importe quel Expression JavaScript à l'intérieur du {} . Par exemple:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

l'autre chose importante est que vous n'avez plus à vous soucier des chaînes multi-lignes. Vous pouvez les écrire simplement comme

> `foo
...     bar`
'foo\n    bar'

Note: j'ai utilisé io.js v2.4.0 pour évaluer toutes les chaînes de modèles indiquées ci-dessus. Vous pouvez également utiliser la dernière version de Chrome pour tester les exemples ci-dessus.

Note: Les spécifications ES6 sont maintenant finalisées , mais n'ont pas encore été mises en œuvre par tous les principaux navigateurs.

selon le Mozilla Developer Network pages , ce sera mis en œuvre pour le soutien de base à partir des versions suivantes: Firefox 34, Chrome 41, Internet Explorer 12. Si vous êtes un utilisateur D'Opéra, Safari, ou Internet Explorer et êtes curieux à ce sujet maintenant, ce lit d'essai peut être utilisé pour jouer jusqu'à ce que tout le monde obtienne du soutien.

de Douglas Crockford Rattrapage JavaScript comprend un String.prototype.supplant de la fonction. Il est court, familier et facile à utiliser:

String.prototype.supplant = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

si vous ne voulez pas changer le prototype de la chaîne, vous pouvez toujours l'adapter pour être autonome, ou le placer dans un autre espace de noms, ou n'importe quoi d'autre.

mot de mise en garde: Évitez tout système de gabarit qui ne vous permet pas d'échapper à ses propres délimiteurs. Par exemple, il n'y aurait aucun moyen de produire ce qui suit en utilisant la méthode supplant() mentionnée ici.

" j'ai 3 ans grâce à ma variable {age}."

interpolation Simple peut travailler pour de petits autonome des scripts, mais vient souvent avec ce défaut de conception qui permettra de limiter toute utilisation sérieuse. Honnêtement, je préfèrent les modèles DOM, tels que:

<div> I am <span id="age"></span> years old!</div>

et utiliser la manipulation jQuery: $('#age').text(3)

alternativement, si vous êtes simplement fatigué de la concaténation des chaînes, il y a toujours une syntaxe alternative:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

Essayer sprintf . Par exemple:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

vous pouvez utiliser Prototype de modèle de système si vous avez vraiment envie d'utiliser un marteau de forgeron pour casser un écrou:

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

j'utilise ce modèle dans beaucoup de langues, quand je ne sais pas comment le faire correctement et vous voulez juste pour se faire une idée rapidement:

// JavaScript
var stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Indigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

bien que pas particulièrement efficace, je le trouve lisible. Il fonctionne toujours, et son toujours disponible:

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

TOUJOURS

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Mother'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'did unspeakable things to'

mise à jour : j'ai mis à jour la version javascript pour remplacer toutes les se produisent plutôt que la première.

vous pouvez le faire facilement en utilisant ES6 template string et transpiler à ES5 en utilisant n'importe quel transpilar disponible comme babel.

const age = 3;

console.log(`I'm ${age} years old!`);

http://www.es6fiddle.net/im3c3euc /

Try kiwi , un module JavaScript léger pour l'interpolation des chaînes.

Vous pouvez le faire

Kiwi.compose("I'm % years old!", [age]);

ou

Kiwi.compose("I'm %{age} years old!", {"age" : age});

Voici une solution qui vous demande de fournir un objet avec les valeurs. Si vous ne fournissez pas un objet comme paramètre, il sera par défaut d'utiliser des variables globales. Mais mieux coller à l'aide du paramètre, c'est beaucoup plus propre.

String.prototype.interpolate = function(props) {
    return this.replace(/\{(\w+)\}/g, function(match, expr) {
        return (props || window)[expr];
    });
};

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 });

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate();

<div id="resultA"></div><div id="resultB"></div>

utiliser ` ( grave accents also known as backtick ) au lieu d'un simple guillemet ( ' ) ou d'un double guillemet ( " ) et du signe dollar / bracket ${ variable } " 15198090920"

par exemple:

console.log(
  `current date: ${new Date()}`
);

plus d'informations à propos de template literals ici .

une Autre masse: jquery-tmpl (templating avec jQuery).

si vous voulez interpoler dans console.log sortie, puis juste

console.log("Eruption 1: %s", eruption1);
                         ^^

Ici, %s est ce qu'on appelle un "spécificateur de format". console.log a cette sorte d'interpolation.

extension sur deuxième réponse de Greg Kindel , vous pouvez écrire une fonction pour éliminer certaines des boilerplate:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

Utilisation:

var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');

je peux vous montrer un exemple:

function fullName(first, last) {
  let fullName = first + " " + last;
  return fullName;
}

function fullNameStringInterpolation(first, last) {
  let fullName = `${first} ${last}`;
  return fullName;
}

console.log('Old School: ' + fullName('Carlos', 'Gutierrez'));

console.log('New School: ' + fullNameStringInterpolation('Carlos', 'Gutierrez'));