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

Produzione: "I pity the foo"

Mi chiedevo se questa stessa cosa fosse possibile anche in JavaScript. L'uso di variabili all'interno di stringhe senza usare la concatenazione - sembra più conciso ed elegante da scrivere.

Puoi trarre vantaggio dai modelli letterali e utilizzare questa sintassi:

`String text ${expression}`

I letterali modello sono racchiusi tra il segno di spunta posteriore (``) (accento grave) anziché tra virgolette doppie o singole.

Questa funzione è stata introdotta in ES2015 (ES6).

Esempio

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

Quanto è pulito?

Bonus:

Consente anche stringhe multilinea in javascript senza escape, il che è ottimo per i template:

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

Supporto per il browser :

Poiché questa sintassi non è supportata dai browser più vecchi (principalmente Internet Explorer), potresti voler usare Babel / Webpack per traspilare il tuo codice in ES5 per assicurarti che funzionerà ovunque.

Nota a margine:

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

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

Prima di Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no, questo non era possibile 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, n. Anche se potresti provare sprintf per JavaScript per arrivare a metà strada:

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

bene potresti farlo, ma non è particolarmente generale

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

Si potrebbe facilmente scrivere una funzione che lo fa in modo intelligente se proprio necessario

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

È possibile utilizzare questa funzione JavaScript per eseguire questo tipo di modello. 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'uso di una funzione come argomento per la funzione String.replace () faceva parte della specifica ECMAScript v3. Vedi questa risposta SO per maggiori dettagli.

Se ti piace scrivere CoffeeScript potresti fare:

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

CoffeeScript è in realtà javascript, ma con una sintassi molto migliore.

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

Se stai cercando di eseguire l'interpolazione per il microtemplating, mi piace Moustache.js a tale 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 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" 

Vorrei usare il back-tick ''.

let name1 = 'Geoffrey';
let msg1 = `Hello ${name1}`;
console.log(msg1); // 'Hello Geoffrey'

Ma se non sai name1quando crei msg1.

Ad esempio, se msg1proveniva da un'API.

Puoi usare :

let name2 = 'Geoffrey';
let msg2 = 'Hello ${name2}';
console.log(msg2); // 'Hello ${name2}'

const regexp = /\${([^{]+)}/g;
let result = msg2.replace(regexp, function(ignore, key){
    return eval(key);
});
console.log(result); // 'Hello Geoffrey'

Sostituirà ${name2}con il suo valore.

Non vedi le librerie esterne menzionate qui, ma Lodash ha _.template(),

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

Se stai già utilizzando la libreria, vale la pena dare un'occhiata e se non stai usando Lodash puoi sempre scegliere i metodi da npm in npm install lodash.templatemodo da poter ridurre le spese generali.

La forma più semplice -

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

Ci sono anche un sacco di opzioni di configurazione -

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

Ho trovato i delimitatori personalizzati più interessanti.

Crea un metodo simile a quello String.format()di Java

StringJoin=(s, r=[])=>{
  r.map((v,i)=>{
    s = s.replace('%'+(i+1),v)
  })
return s
}

uso

console.log(StringJoin('I can %1 a %2',['create','method'])) //output: 'I can create a method'

Citazione di pace del 2020:

Console.WriteLine("I {0} JavaScript!", ">:D<");

console.log(`I ${'>:D<'} C#`)

Usa semplicemente:

var util = require('util');

var value = 15;
var s = util.format("The variable value is: %s", value)

String.prototype.interpole = function () {
    var c=0, txt=this;
    while (txt.search(/{var}/g) > 0){
        txt = txt.replace(/{var}/, arguments[c]);
        c++;
    }
    return txt;
}

uso:

var hello = "foo";
var my_string = "I pity the {var}".interpole(hello);
//resultado "I pity the foo"

var hello = "foo";

var my_string ="I pity the";

console.log (my_string, ciao)