Question

我想用我的“迷你cms”以他们自己的语言打招呼。所有字符串都存储为“文本”-无法添加反引号。

因此，我必须： 1号将我的cms字符串转换为模板字符串("text ${value}" => text ${value}) 2号将值添加到此模板字符串中

我该如何实现？

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

模板字符串是一种字面量-意味着它们仅在编译步骤中可用（包括eval和朋友的编译，如其他答案所示，该警告还警告不要使用它们）。

流式传输模板字符串是一个XY问题。相反，考虑问题本身，您想要通过填充插槽来翻译模板。只要插槽中没有计算（可以使用模板字符串），就可以使用正则表达式进行操作。您还希望将局部变量更改为对象属性，以便可以通过名称以编程方式访问它们，而无需使用eval。

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

       console.log(greetUserInHisLanguage);

如果您需要更复杂的东西，请考虑使用现有的模板库，例如Handlebars。

Answer 2

尝试一下，您可以使用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;
}

工作小提琴-

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

值得注意的

不建议使用eval（），因为它易于注入攻击

Answer 3

通过这种方法，我将变量引用保存到对象中，而不是它们自己的var或let/const等中。

这样，您可以使用square-bracket表示法通过通过正则表达式获取的字符串key访问变量。

通过匹配原始String中的所有${key_name}实例（来自CMS），我们可以遍历它们，并在迭代实例时逐步替换String的每个部分。

const details = {
  name: 'Frank',
  age: 27
}

const replacer = (intpl = '') => {
  const key = intpl.match(/[A-z]+/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(/\${([A-z]*)}/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)

如何为cms使用模板文字？

3 个答案: