Javascript: как использовать шаблонные литералы с JSON?

Сегодня я обнаружил литералы шаблонов Javascript ES6. Всего одно слово: Круто!

Вопрос. Как хранить и загружать шаблонные литералы в формате JSON? Я загружаю некоторые файлы через XHR, а затем некоторые JSON.parse(), которые не поддерживают ` вместо ", поэтому кажется, что литералы шаблонов нельзя сохранять непосредственно в файлах.

Цель: использовать это для динамических строк и перевода и избавиться от запутанных вещей, таких как ("Hello " + username + "! How are you?"), который требует хранения нескольких строк только для одного сообщения, и вместо этого сохранить мои вещи красиво и просто, как

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

где username указывает на динамическую переменную с тем же именем. Это возможно? Если да, то как этого добиться? Ничего страшного, если мне придется использовать функцию для преобразования строк в шаблонные литералы, если это не сильно скажется на общей производительности, но я хотел бы, по крайней мере, избежать eval.


person nora    schedule 06.04.2017    source источник
comment
Эти литералы представляют собой код, а не строки. Вы не можете хранить их как JSON. но вы можете использовать функции. var tplHello = ({username}) => `Hello, ${username}! How are you?` и использовать его как var data={ username: "foo" }, text = tplHello(data);   -  person Thomas    schedule 06.04.2017
comment
@Томас: Спасибо. Кажется, я перепутал литералы шаблонов с динамическими строками, как вы и говорите. Согласно stackoverflow.com/questions/29771597/ преобразование строки в литерал шаблона будет неявно таким же, как eval, поскольку поиск переменной всегда требует выполнения кода. Похоже, моя надежда на простую систему перевода или динамические строки питалась заблуждением. Не по теме: я думаю, что использование RegEx для замены% username (или аналогичного) в строках будет лучше соответствовать тому, чего я хочу добиться.   -  person nora    schedule 06.04.2017


Ответы (3)


Вы можете создать свою собственную функцию для разбора литерала шаблона,

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'

person Manasvi Sareen    schedule 07.07.2019

Вы всегда можете использовать JSON.stringify для включения динамических данных:

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

Мне было проще разделить проблему на несколько подстрок JSON. Создайте ключевое сообщение, и этот ключ хранит части сообщения. Это также хорошо работает для i18n.

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

И затем, после декодирования, вы можете получить к нему доступ как ${message._0}${variable}${message._1}${var2}${message._2}

person Hyung Tae Carapeto Figur    schedule 11.08.2020