Javascript：如何使用带有 JSON 的模板文字？答案

【问题标题】：Javascript: How to use Template Literals with JSON?Javascript：如何使用带有 JSON 的模板文字？
【发布时间】：2017-09-01 20:59:38
【问题描述】：

我今天发现了Javascript ES6 Template Literals。就一个字：太棒了！

问题：如何将模板文字存储和加载为 JSON？我通过 XHR 加载了一些文件，然后是一些不支持 ` 而不是 " 的 JSON.parse()，因此似乎无法将模板文字直接保存在文件中。

目标： 将其用于动态字符串和翻译，并摆脱像 ("Hello " + username + "! How are you?") 这样的混淆内容，这需要为一条消息存储多个字符串，而是将我的内容精美保存很简单

`Hello, ${username}! How are you?`

其中用户名指向同名的动态变量。那可能吗？如果是，如何实现这一目标？如果我必须使用函数以某种方式将字符串转换为模板文字，这没关系，只要它不会严重影响整体性能，但我至少想避免eval。

【问题讨论】：

这些文字是代码而不是字符串。您不能将它们存储为 JSON。但你可以使用函数。 var tplHello = ({username}) => `Hello, ${username}! How are you?` 并将其用作var data={ username: "foo" }, text = tplHello(data);
@Thomas：谢谢。正如您所说，我似乎将模板文字与“动态字符串”混淆了。根据stackoverflow.com/questions/29771597/…，将字符串转换为模板文字将隐含地与 eval 相同，因为变量查找总是需要执行代码。似乎我对一个简单的翻译系统或“动态“字符串”的希望是由一个误解引起的。题外话：我想使用正则表达式替换字符串中的 %username （或类似的）会更适合我想要实现的目标。

标签： javascript json template-literals

【解决方案1】：

您总是可以使用JSON.stringify 来封装动态数据：

const data = 'some value';
JSON.stringify({
  data,
});
// expected: "{\"data\": \"some value\"}"

【讨论】：

【解决方案2】：

您可以创建自己的函数来解析模板文字，

function stringTemplateParser(expression, valueObj) {
  const templateMatcher = /{{\s?([^{}\s]*)\s?}}/g;
  let text = expression.replace(templateMatcher, (substring, value, index) => {
    value = valueObj[value];
    return value;
  });
  return text
}

console.log(stringTemplateParser('my name is {{name}} and age is {{age}}', {name: 'Tom', age:100}));


// output 'my name is Tom and age is 100'

【讨论】：

要使用 ${variable} 格式，请改用此函数：function stringTemplateParser(expression, valueObj) { const templateMatcher = /\${\s?([^{}\s]*)\s?}/g; let text = expression.replace(templateMatcher, (substring, value, index) => { value = valueObj[value]; return value; }); return text }

【解决方案3】：

我发现在 JSON 的几个子字符串中分离问题更容易。创建密钥“消息”，此密钥存储部分消息。它也适用于 i18n。

{
  "message" : {
    "_0": "first part ",
    "_1": "after first variable. ",
    "_2": "after another variable"
  }
}

然后，解码后，您可以像访问它一样访问它 ${message._0}${variable}${message._1}${var2}${message._2}

【讨论】：

【解决方案4】：

试试json-templates。看起来正是您要找的东西。

【讨论】：