Comment puis-je effectuer une interpolation de chaîne en JavaScript?

Question

Considérez ce code:

var age = 3;

console.log("I'm " + age + " years old!");

Existe-t-il d'autres moyens d'insérer la valeur d'une variable dans une chaîne, en dehors de la concaténation de chaînes?

Answer 1

Depuis ES6, vous pouvez utiliser les littéraux de modèle . :

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

P.S. Notez l'utilisation de crapauds: `` .

Answer 2

tl; dr

Utilisez les littéraux de chaîne de modèle d'ECMAScript 2015, le cas échéant.

Explication

Il n'y a pas de moyen direct de le faire, conformément aux spécifications ECMAScript 5, mais ECMAScript 6 a chaînes de modèle , également dénommées quasi littéraux lors de la rédaction de la spec. Utilisez-les comme ceci:

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

Vous pouvez utiliser n'importe quelle expression JavaScript valide dans {} . Par exemple:

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

L’autre élément important est que vous n’avez plus à vous soucier des chaînes multilignes. Vous pouvez les écrire simplement comme

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

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

Remarque: Les spécifications ES6 sont maintenant finalisées , mais doivent encore être implémentés par tous les principaux navigateurs.
Selon les pages du réseau de développeurs Mozilla , ce sera implémenté pour le support de base à partir des versions suivantes: Firefox 34, Chrome 41, Internet Explorer 12. Si vous êtes un utilisateur d’Opera, Safari ou Internet Explorer et que vous êtes curieux de savoir ceci, Ce banc d'essai peut être utilisé pour jouer jusqu'à ce que tout le monde obtienne de l'aide.

Answer 3

Le JavaScript correctif de Douglas Crockford inclut un String.prototype.supplant . une 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 souhaitez pas modifier le prototype de String, vous pouvez toujours l'adapter pour qu'il soit autonome ou le placer dans un autre espace de noms, ou autre.

Answer 4

Attention: évitez tout système de gabarit qui ne vous permettrait pas d’échapper à ses propres délimiteurs. Par exemple, il n’existe aucun moyen de générer ce qui suit à l’aide de la méthode supplant () mentionnée ici.

  

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

Une interpolation simple peut fonctionner pour de petits scripts autonomes, mais vient souvent avec ce défaut de conception qui limitera toute utilisation sérieuse. Honnêtement, je préfère les modèles DOM, tels que:

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

Et utilisez la manipulation jQuery: $ ('# age'). text (3)

Alternativement, si vous êtes simplement fatigué de la concaténation de chaînes, il existe toujours une syntaxe alternative:

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

Answer 5

Essayez sprintf . Par exemple:

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

Answer 6

Vous pouvez utiliser le système de modèle de prototype si vous avez vraiment envie d'utiliser un marteau piqueur pour craquer un écrou:

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

Answer 7

J'utilise ce modèle dans beaucoup de langues quand je ne sais pas encore le faire correctement et que je veux juste avoir 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 je ne sois pas particulièrement efficace, je le trouve lisible. Cela fonctionne toujours et est 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'

Answer 8

Vous pouvez facilement utiliser template chaîne de ES6 et transpiler sur ES5 en utilisant n’importe quel fichier transpilar disponible comme babel.

const age = 3;

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

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

Answer 9

Essayez Kiwi , poids JavaScript module pour interpolation de chaîne.

Vous pouvez faire

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

ou

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

Answer 10

Voici une solution qui vous oblige à fournir un objet avec les valeurs. Si vous ne spécifiez pas d'objet en tant que paramètre, il utilisera par défaut des variables globales. Mais il vaut mieux s'en tenir au paramètre, il 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>

Answer 11

utilisez ` ( accent grave, également appelé backtick ) au lieu de guillemets simples ( ') ou de guillemets doubles ( " ) et du signe dollar / signe de crochet $ {variable}

Par exemple:

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

En savoir plus sur les modèles de littéraux ici .

Answer 12

Si vous souhaitez interpoler dans la sortie console.log , il suffit alors de

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

Ici, % s est ce qu'on appelle un "spécificateur de format". console.log intègre ce type de prise en charge d'interpolation.

Answer 13

En développant la seconde réponse de Greg Kindel , vous pouvez écrire une fonction pour éliminer une partie du passe-partout:

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!');

Answer 14

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'));

Answer 15

Depuis ES6, si vous souhaitez effectuer une interpolation de chaîne dans les clés d'objet, vous obtiendrez un SyntaxError: nom de la propriété attendue, obtenu '$ {' si vous effectuez une opération telle que:

let age = 3
let obj = { `${age}`: 3 }

Vous devriez plutôt procéder comme suit:

let obj = { [`${age}`]: 3 }

Answer 16

L’utilisation de la syntaxe de modèle échoue dans les anciens navigateurs, ce qui est important si vous créez du HTML pour un usage public. Utiliser la concaténation est fastidieux et difficile à lire, en particulier si vous avez des expressions longues ou longues, ou si vous devez utiliser des parenthèses pour gérer des mélanges d’éléments de nombre et de chaînes (les deux utilisant l’opérateur +).

PHP développe les chaînes entre guillemets contenant des variables et même des expressions en utilisant une notation très compacte: $ a = "la couleur est $ color";

En JavaScript, une fonction efficace peut être écrite pour supporter ceci: var a = S ("la couleur est", couleur); , en utilisant un nombre variable d'arguments. Bien que la concaténation ne présente aucun avantage dans cet exemple, lorsque les expressions deviennent plus longues, cette syntaxe est plus claire. Vous pouvez également utiliser le signe dollar pour signaler le début d’une expression à l’aide d’une fonction JavaScript, comme en PHP.

D'un autre côté, écrire une fonction de contournement efficace pour fournir une extension de chaînes de caractères semblable à un modèle pour les navigateurs plus anciens ne serait pas difficile. Quelqu'un l'a probablement déjà fait.

Enfin, j'imagine que sprintf (comme en C, C ++ et PHP) pourrait être écrit en JavaScript, bien que ce soit un peu moins efficace que ces autres solutions.

Answer 17

  

Supplant plus pour la version ES6 du message de @Chris Nielsen.

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

string = "How now ${color} cow? {${greeting}}, ${greeting}, moo says the ${color} cow.";

string.supplant({color: "brown", greeting: "moo"});
=> "How now brown cow? {moo}, moo, moo says the brown cow."