How to use template literals for cms?

Question

I want to use my "mini-cms" to greet users in their own language. All strings are stored as "text" - there is no possibility to add backticks.

Therefore I have to: 1st. convert a string of my cms into template string ("text ${value}" => text ${value}) 2nd. add the value into this template string

How can I achieve that?

myFunction (language) {
   const name = "Tim";

   // call to the cms for translation
      // returns "Hi ${name}, how are you?";
   const textResponse = getTranslation(language);

   // How to convert textResponse into a template string and fill in ${name} 
   // with "Tim"?
   const greetUserInHisLanguage = ???? 

   return greetUserInHisLanguage;
}

Answer 1

Template strings are a kind of a literal - which means, they are only available at the compilation step (including compilation by eval and friends, as demonstrated in the other answer, which also warns against their use).

Streaming for template strings is a XY-problem. Rather, thinking about the problem itself, you want to translate a template by filling in slots. You can do that using regular expressions, as long as you don't have calculations inside the slots (as you might have with template strings). You would also want to change the local variables into object properties in order for them to be accessible programmatically by name without the need for eval .

  const context = { name: "Tim" }; const textResponse = "Hi ${name}, how are you?"; const greetUserInHisLanguage = textResponse.replace(/\\${(.*?)}/g, (_, name) => context[name]); console.log(greetUserInHisLanguage); 

If you need something more complex, consider using an existing templating library like Handlebars instead.

Answer 2

Try this,You can use eval()

myFunction (language) {
   const name = "Tim";

   // call to the cms for translation
      // returns "Hi ${name}, how are you?";
   const textResponse = getTranslation(language);

   // How to convert textResponse into a template string and fill in ${name} 
   // with "Tim"?
   const greetUserInHisLanguage =eval('`'+textResponse+'`') // use eval()

   return greetUserInHisLanguage;
}

Working fiddle-

 function myFunction(language) { const name = "Tim"; // call to the cms for translation // returns "Hi ${name}, how are you?"; const textResponse = getTranslation(language); // How to convert textResponse into a template string and fill in ${name} // with "Tim"? const greetUserInHisLanguage = eval('`'+textResponse+'`') // use template literals here return greetUserInHisLanguage; } function getTranslation(language) { return "Hi ${name}, how are you?" } console.log(myFunction("spanish")) 

Noteworthy

Using eval() is not recommended as its prone to injection attacks

Answer 3

In this approach i save my variable references into an Object instead of their own var or let/const etc.

That way you can use square-bracket notation to access the variable via the string key that is acquired via Regex.

By matching all ${key_name} instances in the original String (from your CMS) we can loop through them all and replace each part of the String incrementally as we iterate through the instances.

 const details = { name: 'Frank', age: 27 } const replacer = (intpl = '') => { const key = intpl.match(/[Az]+/gm)[0] if (!(key in details)) console.warn(`Key ${key} from ${intpl} not found in details Object`) return details[key] || intpl } const interpolate = string => { const matches = string.match(/\\${([Az]*)}/gm) return matches.reduce((prev, curr) => { return prev.replace(curr, replacer) }, string) } const replaced = interpolate("Hi ${name}, how are you? you are ${age}, fail ${foo}") console.log(replaced)