Comment interpoler des variables dans des chaînes JavaScript, sans concaténation?

Question

Je sais en PHP que nous pouvons faire quelque chose comme ceci:

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

Sortie: "I pity the foo"

Je me demandais si la même chose est possible en JavaScript aussi bien. Utilisation de variables à l'intérieur de chaînes sans utiliser de concaténation - il semble plus concis et élégant à écrire.

Answer 1

A partir de Firefox 34/Chrome 41/Safari 9/Microsoft bord, vous pouvez utiliser une fonction ES2015/ES6 appelé Template Literals et utiliser cette syntaxe:

`String text ${expression}` 

Les littéraux de modèle sont entourés par le back-tick (``) (accent grave) au lieu de guillemets doubles ou simples.

Exemple:

var a = 5; 
var b = 10; 
console.log(`Fifteen is ${a + b}.`); 
// "Fifteen is 15. 

Comment pur est-ce?

Bonus:

Il permet également des chaînes multi-lignes en javascript sans échapper, ce qui est excellent pour les modèles:

return ` 
    <div class="${foo}"> 
     ... 
    </div> 
`; 

Browser support:

Comme cette syntaxe est non pris en charge par les anciens navigateurs (Internet Explorer et Safari < = 8), vous pouvez utiliser Babel pour transférer votre code dans ES5 pour s'assurer qu'il fonctionnera partout.

---

Side note:

A partir de IE8 + vous pouvez utiliser la chaîne de base mise en forme à l'intérieur console.log:

console.log('%s is %d.', 'Fifteen', 15); 
// Fifteen is 15. 

Answer 2

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, ce qui n'était pas possible en javascript. Vous devrez recourir à:

var hello = "foo"; 
var my_string = "I pity the " + hello; 

Answer 3

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, non. Bien que vous pouvez essayer d'obtenir sprintf for JavaScript à mi-chemin:

var hello = "foo"; 
var my_string = sprintf("I pity the %s", hello); 

Answer 4

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

Answer 5

bien vous pouvez le 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 intelligemment si vous avez vraiment besoin de

Answer 6

Si vous aimez écrire CoffeeScript vous pouvez faire:

hello = "foo" 
my_string = "I pity the #{hello}" 

CoffeeScript est en fait javasc ript, mais avec une syntaxe bien meilleure.

Pour une présentation de CoffeeScript, cochez cette case beginner's guide.

Answer 7

Vous pouvez utiliser cette fonction javascript pour effectuer ce type de gabarit. 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 d'argument de la fonction String.replace() fait partie de la spécification de l'ECMAScript. Voir this SO answer pour plus de détails.

Answer 8

réponse complète, prêt à être utilisé:

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 comme

Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'}); 

Pour le joindre à String.prototype:

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

Ensuite, utilisez comme:

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

Answer 9

j'ai écrit ce paquet 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 du tableau et retourner la chaîne suivante

"this is a test string for stringInject" 

ou vous pouvez remplacer les espaces réservés avec des clés d'objets et valeurs comme ceci:

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" }); 

"My username is tjcafferkey on Github" 

Answer 10

Eh bien, vous pouvez utiliser this is ${variable} ou vous pouvez utiliser "this is "+variable Ces deux fonctionnent bien.

Pensez également à utiliser le tilde (``) clé autour du this is ${variable} au lieu de "ou"