Come interpolare le variabili nelle stringhe in JavaScript, senza concatenazione?

So che in PHP possiamo fare qualcosa del genere:

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

Risultato: "I pity the foo"

Mi stavo chiedendo se questa stessa cosa è ansible anche in JavaScript. Usando le variabili all’interno delle stringhe senza utilizzare la concatenazione, sembra più conciso ed elegante da scrivere.

A partire da Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge è ansible utilizzare una funzione ES2015 / ES6 denominata Template Literals e utilizzare questa syntax:

 `String text ${expression}` 

I valori letterali del modello sono racchiusi dal segno di spunta posteriore (“) (accento grave) anziché da virgolette singole o doppie.

Esempio:

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

Quanto è bello?

Bonus:

Permette anche di stringere più righe in javascript senza escaping, il che è ottimo per i modelli:

 return ` 
...
`;

Supporto per browser :

Poiché questa syntax non è supportata dai browser più vecchi (Internet Explorer e Safari <= 8), potresti voler utilizzare Babel per trascrivere il tuo codice in ES5 per assicurarti che venga eseguito ovunque.


Nota a margine:

A partire da IE8 + è ansible utilizzare la formattazione di base della stringa all’interno di console.log :

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

Prima di Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no, non era ansible in javascript. Dovresti ricorrere a:

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

Prima di Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no. Anche se potresti provare sprintf per JavaScript per ottenere a metà strada lì:

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

beh, potresti farlo, ma non è in generale

 'I pity the $fool'.replace('$fool', 'fool') 

Potresti scrivere facilmente una funzione che funzioni in modo intelligente se davvero ne hai bisogno

Se ti piace scrivere CoffeeScript puoi fare:

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

CoffeeScript è effettivamente javascript, ma con una syntax molto migliore.

Per una panoramica di CoffeeScript, consulta questa guida per principianti .

Risposta completa, pronta per essere utilizzata:

  var Strings = { create : (function() { var regexp = /{([^{]+)}/g; return function(str, o) { return str.replace(regexp, function(ignore, key){ return (key = o[key]) == null ? '' : key; }); } })() }; 

Chiama come

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

Per collegarlo a String.prototype:

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

Quindi utilizzare come:

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

Puoi usare questa funzione javascript per fare questo tipo di template. Non è necessario includere un’intera libreria.

 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" } ); 

Uscita : "I would like to receive email updates from this store FOO BAR BAZ."

L’utilizzo di una funzione come argomento della funzione String.replace () faceva parte delle specifiche di ECMAScript v3. Vedi questa risposta SO per maggiori dettagli.

Se stai cercando di fare interpolazione per microtemplare, mi piace Mustache.js per questo scopo.

Ho scritto questo pacchetto npm stringinject https://www.npmjs.com/package/stringinject che ti permette di fare quanto segue

 var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]); 

che sostituirà {0} e {1} con gli elementi dell’array e restituirà la seguente stringa

 "this is a test string for stringInject" 

oppure potresti sostituire i segnaposti con chiavi e valori dell’object in questo modo:

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

Non vedi nessuna libreria esterna menzionata qui, ma Lodash ha _.template() ,

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

Se stai già facendo uso della libreria, vale la pena provarlo e, se non stai facendo uso di Lodash, puoi sempre selezionare i metodi da npm npm install lodash.template modo da poter ridurre il sovraccarico.

La forma più semplice –

 var compiled = _.template('hello <%= user %>!'); compiled({ 'user': 'fred' }); // => 'hello fred!' 

Ci sono un sacco di opzioni di configurazione anche –

 _.templateSettings.interpolate = /{{([\s\S]+?)}}/g; var compiled = _.template('hello {{ user }}!'); compiled({ 'user': 'mustache' }); // => 'hello mustache!' 

Ho trovato i delimitatori personalizzati più interessanti.