Javascript: How to use Template Literals with JSON?

Question

I discovered Javascript ES6 Template Literals today. Just one word: Awesome!

Question: How to store and load Template Literals as JSON? I load some files via XHR, followed by some JSON.parse() which doesn't support ` instead of " , so it seems one can't save Template Literals directly in the files.

Goal: To use this for dynamic strings and translation and to get rid of confusing stuff like ("Hello " + username + "! How are you?") which requires multiple strings to be stored for just one message, and instead save my stuff beautifully and simple as

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

where username points to the dynamic variable with the same name. Is that possible? If yes, how to achieve this? It's okay if i have to use a function to somehow convert the strings into Template Literals as long as it doesn't hit hard on the overall performance, but I would like to at least avoid eval .

Answer 1

You can create your own function to parse template literal,

 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'

Answer 2

You could always use JSON.stringify to enclose dynamic data:

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

Answer 3

I found it easier to separate the problem in a few substrings of JSON. Create the key "message" and this key stores parts of the message. It also works well for i18n.

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

And then, after decoding it, you can access it like ${message._0}${variable}${message._1}${var2}${message._2}

Answer 4

Try json-templates . Looks like exactly what you're looking for.