interpolacja String o zmiennej

Question

Say mam zmienną str

var str = "123" 

Teraz mogę zrobić console.log(`Hello ${str}`) i będzie drukować Hello 123

Teraz mam inną zmienną strnew

var strnew = 'Hello ${str}' 

Note (w oparciu na odpowiedzi/komentarze) - strnew jest czytany z pliku, więc zawsze jest ciągiem i nie może być zastąpione `

Jak console.log(...) wydrukować Hello 123

Czy możliwe wihtout jakiejkolwiek eval()

Answer 1

Z czegoś tak prostego jak ${str} można użyć prostego zastąpienia wyrażenie:

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

W ogólnym przypadku, nie, nie jest możliwe bez eval (brak pisania własnego tłumacza), ponieważ ${...} może zawierać dowolne wyrażenia.

kompletności boską, oto rozwiązanie eval:

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

Można użyć funkcji zamiast tylko ciąg.

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

Answer 3

Dzięki this answer, tutaj jest trochę czarnej magii kodu, który osiąga co chcesz. Zastrzeżenie - jest to dla zabawy/bardzo ograniczone i egzotyczne zastosowanie. Prawdopodobnie będzie bardzo powolny i ulegnie awarii w wielu skrajnych przypadkach, ale przy ograniczonym zakresie twojego pytania zadziała.

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 
 
    
 
    }