Почему не работают как надо шаблонные строки?

Question

[Sviaznoi]

Почему не работают шаблонные строки в моей программе:


Не понимаю почему значение от classPet = whoIs.elements.classPet.value которое точно присваивается переменной не доходит до ${classPet}. В ${name} проблем никаких. Значение в переменную classPet точно присваивается, но выводи всё равно undefined. Fiddle пишет что ожидалось присваивание но было получено выражение . Отладчики браузеров ничего не пишут.

Answer 1

[Kovalsky]

Template strings это не шаблон который вы можете в любой момент взять и забить нужными данными, это просто инструмент с помощью которого данные распихиваются по строке. То есть у вас на 36ой строке cOA.begin создаётся именно с теми данными которые доступны на тот момент, а т.к. classPet и name не существуют в текущей области видимости, то вместо них используется undefined.

Кстате, как по мне, так эти template strings не самый удобный механизм для обработки шаблонов, как бы ни было обманчиво их название; если пользоваться ими, то на каждый шаблон придётся иметь свою функцию. Имхо проще обрабатывать шаблоны кастомно:

(() => {
  const re_template = /{(.*?)}/g;

  String.prototype.process = function(data) {
    return this.replace(re_template, (entry, word) => data[ word ]);
  }
})();

let templates = {
  greeting: 'Hello, my name is {name} and my age is {age}'
};

// Напрямую:
templates.greeting.process({ name: 'Yeshua', age: 2019 });
// Hello, my name is Yeshua and my age is 2019
templates.threat.process({ reason: 'i dont like you' });
// TypeError: Cannot read property 'process' of undefined


// Или автоматически вызывая process с помощью Proxy:
// (то же можно было реализовать просто с помощью дополнительной функции)
templates = new Proxy(templates, {
    get(target, prop) {
    	if (prop in target) {
        	return String.prototype.process.bind(target[prop]);
        } else {
        	throw new Error(`String "${ prop }" was not found in storage!`);
        }
    }
});

templates.greeting({ name: 'Yeshua', age: 2019 });
// Hello, my name is Yeshua and my age is 2019
templates.threat({ reason: 'i dont like you' });
// Error: String "threat" was not found in storage!

Comments

[Sviaznoi]

Благодарю за ответ. Но почему тогда браузерные движки выводят значения name? В хроме запросто выводится ${name}, хотя ситуация примерно та же. Fiddle отказывается выводить ${name}.

[Kovalsky]

Sviaznoi,

function Essence(n, c){
  let  name = n, classPet = c;
  logScreen.textContent = cOA.begin;
}

var cOA = {
  begin: `Хорошо. Вы решили завести ${classPet} по имени ${name}.
         Если вы действительно готовы начать за ним ухаживать?`,
}

В этом куске кода объявляется функция Essence и объект cOA в котором свойство begin это строка "Хорошо. Вы решили завести undefined по имени undefined. Если вы действительно готовы начать за ним ухаживать?". Фирштейн? К тому моменту когда выполняется функция Essence значение cOA.begin уже давно сформировано, то есть при вызове этой функции оно не меняется никак, а остаётся как и было с undefined. Ставлю любую конечность, что в консоли вы создаете строку с помощью литерала template string в момент вызова функции

[Sviaznoi]

Хорошо. Мой косяк. Он при повторном вызове отдаёт name. Но при первом вызове он его просто не показывает.


Через консоль я ничего не вводил.

[Kovalsky]

Sviaznoi, а зачем вы создаёте сообщение за пределами функции в который вызываете? Либо создавайте её при вызове, либо пользуйтесь шаблонами

[Sviaznoi]

Никита Полевой, Коллекция ответов вне конструктора это как то аккуратнее и более наглядно что ли. Получается что cOA что то вроде инструмента которым пользуется конструктор, и в самом конструкторе не надо нагромождать кучу текста. А сейчас буду пробовать писать функцию шаблонизатор так же вне конструктора, как инструмент, посмотрю что будет. Я человек не опытный. По экспериментирую... Заодно регулярные выражения выучу. Оказывается я их почти не знаю...

[Kovalsky]

Sviaznoi, "Коллекция ответов вне конструктора это как то аккуратнее и более наглядно что ли" - согласен на все 100%. Попробуйте структуру которую предложил я в примере, там как раз реализован полноценный механизм обработки шаблонов. Не то чтоб я её навязываю, но по моему опыту это очень удобный подход.