javascript - strings - Interpolación de cadenas en variable

template string javascript html

Question

Digamos que tengo una variable str

var str = "123"

Ahora podría hacer console.log(`Hello ${str}`) y se imprimirá Hello 123

Ahora tengo otra variable strnew

var strnew = ''Hello ${str}''

Nota (basada en las respuestas / comentarios) - se lee strnew desde un archivo, por lo que siempre es una cadena y no se puede reemplazar con `

¿Cómo puedo console.log(...) para imprimir Hello 123

¿Es posible sin cualquier tipo de eval()

Answer 1

Con algo tan simple como ${str} puedes usar un reemplazo de cadena simple:

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

En un caso general, no, no es posible sin eval (aparte de escribir su propio intérprete js), porque ${...} puede contener expresiones arbitrarias.

Para completar, aquí está la solución 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

Gracias a esta respuesta , aquí hay un poco de código de magia negra que logra lo que deseas. Descargo de responsabilidad - esto es por diversión / aplicación muy limitada y exótica. Es probable que sea muy lento y se descomponga en muchos casos de borde, pero con un alcance limitado de su pregunta funciona.

function getString(){
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){
var foo = 1;
var bar = 2;
var templString = getString();
var fnFullText = ''with(arguments[0]){ return `'' + templString + ''`;}'';
var tempalteFn = new Function(fnFullText);
console.log(tempalteFn(localEnvironmentProxy));
//calculating 1 + 2 = 3
}

Answer 3

Puedes usar la función en lugar de solo la cadena.

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