Angular2: Разница между ${..} и {{…}} в строках шаблона

В ES6 есть возможность использования шаблонных строк, то есть мы можем формировать/конкатенировать строки вот таким образом (с помощью обратной кавычки):

const name="Джон";
const intro = `Меня зовут ${name}`;

console.log(intro);

А в шаблонах компонентов Angular 2 мы используем двойные фигурные скобки для интерполяции, которые можем использовать для вставки значения из переменной.

@Component({
   selector: 'selector-test-tag',
   template: `
   <div>
     <p>Меня зовут ${name}</p>
     <p>Меня зовут {{name}}</p>
   </div>
   `
})
export class Test {
   name: string;
}

Вопрос: Существуют ли причины, почему стоит выбрать одно вместо другого?

</div><div class="s-prose js-post-body" itemprop="text">

Это разные вещи:

${} используется как заполнители в шаблонной строке, как вы уже знаете. Эти шаблонные строки не такие же, как шаблоны Angular, и вам не следует использовать ${} в ваших шаблонах Angular 2. Для начала это не сработает, если вы переместите шаблон в внешний файл.

{{}} — это синтаксис интерполяции Angular, и его следует использовать в шаблонах Angular 2. Вы определяете свойство или метод в классе компонента и используете {{}} в шаблоне компонента для интерполяции значения этого свойства или для вызова метода. Вы также можете использовать выражения ({{a + b / 2}}) и пайпы ({{title | uppercase}}).

<pНесколько ресурсов:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

Удачи!

</div><div class="s-prose js-post-body" itemprop="text">

Выражение Angular {{ }} создает привязку, которая управляется Angular, где Angular автоматически отслеживает изменения в свойстве и может динамически изменять значение этого свойства по мере его изменения во время выполнения, в то время как метод ES6 Template анализирует значение один раз, при первом отображении.

</div>

Ответ или решение

Вопрос о различии между ${...} и {{...}} в контексте Angular 2 и ES6 представляет интерес для разработчиков, которые стремятся понять, как функционируют шаблоны в Angular и синтаксис шаблонных строк в JavaScript.

Объяснение различий между ${...} и {{...}}

1. Шаблонные строки в ES6 — ${...}:

   • ${...} используется в шаблонных строках (template strings), которые являются частью спецификации ES6. Шаблонные строки обозначаются обратными кавычками (`) и позволяют включать переменные или выражения внутри строки. Например:

     const name = "Джон";
     const intro = `Меня зовут ${name}`;
     console.log(intro); // Вывод: Меня зовут Джон

   • Шаблонные строки не имеют никакого отношения к Angular и предназначены для работы с обычными строками в JavaScript. К тому же, если вы перенесете шаблон во внешний файл, использование ${...} не будет работать.

2. Интерполяция в Angular — {{...}}:

   • {{...}} — это синтаксис интерполяции в Angular, который позволяет вставлять значения переменных или результаты выполнения методов из компонента в шаблон. Например:

     @Component({
     selector: 'selector-test-tag',
     template: `
     <div>
         <p>Меня зовут {{name}}</p>
     </div>
     `
     })
     export class Test {
     name: string = 'Джон';
     }

   • В отличие от шаблонных строк, Angular автоматически отслеживает изменения в переменных, и если значение name изменится в компоненте, это изменение будет отражено в интерфейсе пользователя без необходимости вручную обновлять шаблон.

Почему следует выбирать одно над другим?

• Использование в Angular:

  • В контексте Angular следует использовать {{...}}, поскольку это синтаксис, который Angular понимает и использует для связывания данных. Это позволяет Angular динамически обновлять DOM в ответ на изменения в данных компонента, что является одной из основных концепций реактивного программирования.

• Ограничения ${...} в Angular:

  • Используя ${...} в шаблонах Angular, вы столкнетесь с тем, что это не будет работать, поскольку Angular не распознает этот синтаксис. Более того, он не поддерживает реактивные изменения, как это делает интерполяция.

• Статичность против динамичности:

  • ${...} обрабатывает значения один раз во время первого рендеринга, тогда как {{...}} позволяет Angular следить за изменениями и обновлять представление, создавая более интерактивные и динамичные пользовательские интерфейсы.

Ресурсы для дальнейшего изучения

• Шаблонные литералы в JavaScript
• Шаблонный синтаксис в Angular

Таким образом, для разработки на Angular 2 и последующих версиях рекомендуется использовать {{...}} для привязки данных и эффективного обновления интерфейса, в то время как ${...} следует использовать только в контексте обычного JavaScript для работы со строками.