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))