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

Question

So in PHP possiamo fare qualcosa di simile:

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

uscita: "I pity the foo"

mi chiedevo se la stessa cosa è possibile in JavaScript pure. Usando le variabili all'interno delle stringhe senza utilizzare la concatenazione, sembra più conciso ed elegante da scrivere.

Answer 1

A partire da Firefox 34/Chrome 41/Safari 9/Microsoft Edge è possibile utilizzare un ES2015/funzione ES6 chiamato Template Literals e utilizzare la seguente sintassi:

`String text ${expression}` 

I letterali modello sono racchiusi da back-tick (``) (accento grave) invece di virgolette singole o doppie.

Esempio:

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

Come pulito è quello?

Bonus:

Permette anche per le stringhe multilinea in javascript, senza fuggire, che è grande per i modelli:

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

Browser support:

Poiché questa sintassi è non supportato dai browser più vecchi (Internet Explorer e Safari < = 8), potresti voler utilizzare Babel per trasporre il tuo codice in ES5 per assicurarti che funzioni ovunque.

---

Nota a margine:

A partire da IE8 + è possibile utilizzare stringa di base formattazione all'interno console.log:

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

Answer 2

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, no, che non era possibile in javascript. Si dovrà ricorrere a:

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

Answer 3

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, no. Anche se si potrebbe provare sprintf for JavaScript per arrivare a metà strada:

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

Answer 4

Se stai cercando di fare interpolazione per microtemplating, mi piace Mustache.js a tale scopo.

Answer 5

bene si potrebbe fare questo, ma non è esp generale

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

Si potrebbe facilmente scrivere una funzione che fa questo in modo intelligente se veramente avevi bisogno di

Answer 6

Se ti piace scrivere CoffeeScript si potrebbe fare:

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

CoffeeScript in realtà È javasc ript, ma con una sintassi molto migliore.

Per una panoramica di CoffeeScript, controllare questo beginner's guide.

Answer 7

È possibile utilizzare questa funzione javascript per eseguire questa sorta di modellazione. 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."

Utilizzando una funzione come argomento della funzione String.replace() era parte del ECMAScript v3 spec. Vedi this SO answer per maggiori dettagli.

Answer 8

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

chiamata come

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

per fissarlo al String.prototype:

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

Quindi utilizzare come:

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

Answer 9

Ho scritto questo pacchetto npm stringinject https://www.npmjs.com/package/stringinject che consente di effettuare le seguenti operazioni

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

che sostituirà il {0} e {1} con gli elementi di matrice e tornare la seguente stringa

"this is a test string for stringInject" 

o si potrebbe sostituire i segnaposto con chiavi oggetto e valori in questo modo:

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

"My username is tjcafferkey on Github" 

Answer 10

Bene, è possibile utilizzare this is ${variable} oppure è possibile utilizzare "this is "+variable Entrambi funzionano bene.

ricordarsi di utilizzare il tilda (``) chiave di tutto il this is ${variable} al posto di "o '