¿Es posible crear una cadena de plantilla como una cadena habitual,
let a = "b:${b}";y luego convertirlo en una cadena de plantilla,
let b = 10; console.log(a.template()); // b:10 sin eval , new Function y otros medios de generación de código dinámico?
En mi proyecto he creado algo como esto con ES6:
String.prototype.interpolate = function(params) { const names = Object.keys(params); const vals = Object.values(params); return new Function(...names, `return \`${this}\`;`)(...vals); } const template = 'Example text: ${text}'; const result = template.interpolate({ text: 'Foo Boo' }); console.log(result);Como su cadena de plantilla debe hacer referencia a la variable b dinámicamente (en tiempo de ejecución), la respuesta es: NO, es imposible hacerlo sin la generación dinámica de código.
Pero, con eval es bastante simple:
let tpl = eval('`'+a+'`');No, no hay forma de hacer esto sin la generación dinámica de código.
Sin embargo, he creado una función que convertirá una cadena regular en una función a la que se le puede proporcionar un mapa de valores, usando cadenas de plantilla internamente.
Generar esencia de cadena de plantilla
/** * Produces a function which uses template strings to do simple interpolation from objects. * * Usage: * var makeMeKing = generateTemplateString('${name} is now the king of ${country}!'); * * console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'})); * // Logs 'Bryan is now the king of Scotland!' */ var generateTemplateString = (function(){ var cache = {}; function generateTemplate(template){ var fn = cache[template]; if (!fn){ // Replace ${expressions} (etc) with ${map.expressions}. var sanitized = template .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function(_, match){ return `\$\{map.${match.trim()}\}`; }) // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string. .replace(/(\$\{(?!map\.)[^}]+\})/g, ''); fn = Function('map', `return \`${sanitized}\``); } return fn; } return generateTemplate; })();Uso:
var kingMaker = generateTemplateString('${name} is king!'); console.log(kingMaker({name: 'Bryan'})); // Logs 'Bryan is king!' to the console.Espero que esto ayude a alguien. Si encuentra un problema con el código, tenga la amabilidad de actualizar Gist.