Considérez ce code:

var age = 3;

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

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

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

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

PS Notez l'utilisation de guillemets obliques: ``.

tl; dr

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

Explication

Il n'y a aucun moyen direct de le faire, selon les spécifications ECMAScript 5, mais ECMAScript 6 a des chaînes de modèle , qui étaient également connues sous le nom de quasi-littéraux 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 quelle expression JavaScript valide à 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'

Remarque: J'ai utilisé io.js v2.4.0 pour évaluer toutes les chaînes de modèle illustré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ées par tous les principaux navigateurs.
Selon les pages du Réseau des développeurs Mozilla , cela sera implémenté pour une prise en charge 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 cela vous intéresse maintenant , ce banc d'essai peut être utilisé pour jouer jusqu'à ce que tout le monde soit soutenu.

Remedial JavaScript de Douglas Crockford comprend une String.prototype.supplantfonction. 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 String, vous pouvez toujours l'adapter pour qu'il soit autonome, ou le placer dans un autre espace de noms, ou autre.

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

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

L'interpolation simple peut fonctionner pour les petits scripts autonomes, mais est souvent accompagnée de cette faille de conception qui limitera toute utilisation sérieuse. Je préfère honnêtement 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(" ");

Essayez la bibliothèque sprintf (une implémentation complète de sprintf JavaScript open source). Par exemple:

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

vsprintf prend un tableau d'arguments et renvoie une chaîne formatée.

J'utilise ce modèle dans de nombreuses langues quand je ne sais pas encore comment le faire correctement et je veux juste avoir une idée rapidement:

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

Bien qu'il ne soit pas particulièrement efficace, je le trouve lisible. Il 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'

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

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

Vous pouvez facilement utiliser ES6 template stringet transposer en ES5 en utilisant n'importe quel transpilaire disponible comme babel.

const age = 3;

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

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

Essayez le kiwi , un module JavaScript léger pour l'interpolation de chaînes.

Tu peux faire

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

ou

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

Si vous voulez interpoler en console.logsortie, alors juste

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

Voici %sce qu'on appelle un "spécificateur de format". console.loga ce type de support d'interpolation intégré.

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

En développant la deuxième 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));
    }
}

Usage:

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

Depuis ES6, si vous souhaitez effectuer une interpolation de chaîne dans les clés d'objet, vous obtiendrez un SyntaxError: expected property name, got '${'si vous faites quelque chose comme:

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

Vous devriez plutôt faire ce qui suit:

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

Supplantent plus pour ES6 version du poste de Nielsen @ Chris.

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."

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

PHP étend les chaînes entre guillemets contenant des variables et même certaines expressions en utilisant une notation très compacte: $a="the color is $color";

En JavaScript, une fonction efficace peut être écrite pour supporter ceci:, var a=S('the color is ',color);en utilisant un nombre variable d'arguments. Bien qu'il n'y ait aucun avantage sur la concaténation dans cet exemple, lorsque les expressions s'allongent, cette syntaxe peut être plus claire. Ou on peut 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é, il ne serait pas difficile d'écrire une fonction de contournement efficace pour fournir une extension de type modèle de chaînes pour les navigateurs plus anciens. Quelqu'un l'a probablement déjà fait.

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

Interpolation flexible personnalisée:

var sourceElm = document.querySelector('input')

// interpolation callback
const onInterpolate = s => `<mark>${s}</mark>`

// listen to "input" event
sourceElm.addEventListener('input', parseInput) 

// parse on window load
parseInput() 

// input element parser
function parseInput(){
  var html = interpolate(sourceElm.value, undefined, onInterpolate)
  sourceElm.nextElementSibling.innerHTML = html;
}

// the actual interpolation 
function interpolate(str, interpolator = ["{{", "}}"], cb){
  // split by "start" pattern
  return str.split(interpolator[0]).map((s1, i) => {
    // first item can be safely ignored
	  if( i == 0 ) return s1;
    // for each splited part, split again by "end" pattern 
    const s2 = s1.split(interpolator[1]);

    // is there's no "closing" match to this part, rebuild it
    if( s1 == s2[0]) return interpolator[0] + s2[0]
    // if this split's result as multiple items' array, it means the first item is between the patterns
    if( s2.length > 1 ){
        s2[0] = s2[0] 
          ? cb(s2[0]) // replace the array item with whatever
          : interpolator.join('') // nothing was between the interpolation pattern
    }

    return s2.join('') // merge splited array (part2)
  }).join('') // merge everything 
}

input{ 
  padding:5px; 
  width: 100%; 
  box-sizing: border-box;
  margin-bottom: 20px;
}

*{
  font: 14px Arial;
  padding:5px;
}

<input value="Everything between {{}} is {{processed}}" />
<div></div>

Bien que les modèles soient probablement les meilleurs pour le cas que vous décrivez, si vous avez ou voulez vos données et / ou arguments sous forme itérable / tableau, vous pouvez les utiliser String.raw.

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

Avec les données sous forme de tableau, on peut utiliser l'opérateur d'étalement:

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);

Impossible de trouver ce que je cherchais, puis je l'ai trouvé -

Si vous utilisez Node.js, il existe un utilpackage intégré avec une fonction de formatage qui fonctionne comme ceci:

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

Par coïncidence, cela est désormais intégré aux console.logsaveurs dans Node.js -

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError