Question

Sagen, ich habe eine Variable str

var str = "123" 

Jetzt konnte ich console.log(`Hello ${str}`) tun und es wird Hello 123

Jetzt drucken Ich habe eine andere Variable strnew

var strnew = 'Hello ${str}' 

Hinweis (basierend auf Antworten/Kommentare) - strnew wird von einer Datei gelesen, so ist es immer eine Zeichenfolge und kann nicht sein ersetzt mit `

Wie console.log(...) ich Hello 123

Ist es möglich, wihtout jede Art von eval()

Answer 1

Mit etwas so einfachen wie ${str} Sie einen einfachen String Ersatz verwenden können:

var template = (tpl, args) => tpl.replace(/\${(\w+)}/g, (_, v) => args[v]); 
 

 
var tpl = 'Hello ${str} and ${other}'; 
 

 
console.log(template(tpl, {str: 'foo', other: 'bar'}));

In einem allgemeinen Fall, nein, nicht möglich, ohne Eval (kurz, um einen eigenen js-Interpreter zu schreiben), weil ${...} kann beliebige Ausdrücke enthalten.

Der Vollständigkeit halber ist hier die eval Lösung:

var template = function(tpl, args) { 
 
    var keys = Object.keys(args), 
 
     fn = new Function(...keys, 
 
      'return `' + tpl.replace(/`/g, '\\`') + '`'); 
 
    return fn(...keys.map(x => args[x])); 
 
}; 
 

 

 
function test() { 
 
    var myTpl = 'Hello ${str + "!"} and ${other.toUpperCase()}'; 
 
    console.log(template(myTpl, {str: 'foo', other: 'bar'})); 
 
} 
 

 
test();

Answer 2

drucken Sie Funktion, anstatt nur Zeichenfolge verwenden können.

var strnew = function(str){ 
 
    return `Hello ${str}`; 
 
} 
 
var str = "123"; 
 
console.log(strnew(str))

Answer 3

Dank this answer, hier ist ein wenig schwarze Magie-Code, was Sie wollen, erreicht. Disclaimer - das ist zum Spaß/sehr begrenzt und exotische Anwendung. Es ist wahrscheinlich, dass es sehr langsam ist und in vielen Grenzfällen zusammenbricht, aber mit einem begrenzten Umfang Ihrer Frage funktioniert es.

function getString(){ 
 
\t return "calculating ${foo} + ${bar} = ${foo + bar}"; 
 
} 
 

 
var localEnvironmentProxy = new Proxy({}, { 
 
    has(target, prop) { return true; }, 
 
    get(target, prop) { return (prop in target ? target : window)[prop]; } 
 
    }); 
 
    
 
    with(localEnvironmentProxy){ 
 
    
 
\t var foo = 1; 
 
\t var bar = 2; 
 
    
 
\t var templString = getString(); 
 
\t 
 
\t var fnFullText = 'with(arguments[0]){ return `' + templString + '`;}'; 
 
\t 
 
\t var tempalteFn = new Function(fnFullText); 
 
\t \t \t \t 
 
\t console.log(tempalteFn(localEnvironmentProxy)); 
 
    //calculating 1 + 2 = 3 
 
    
 
    }