>

Com o ES6 (ou ES2015 se quiser), podemos criar cordas de modelo com Modelos Literais. Literais de modelo são strings nas quais podemos injetar variáveis e funções. Eles nos permitem escrever sem usar sinais de mais + para concatenar strings e variáveis. Estas strings usam um back-tick ` em vez de aspas simples ou duplas.

Concatenação variável:

var name = "Josh";
var string = "Hello " + name;// output = <p>Hello Josh</p>

Template literal com variável:

let name = "Josh";
let string = `Hello ${name}`;// output = <p>Hello Josh</p>

A diferença aqui é usar um sinal de dólar e chaves de caracóis${} em torno de um nome de variável e nenhum sinal de mais ${variableName} . Isto torna o uso de strings e variáveis juntos mais legível.

Concatenação de linhas:

var string = "The quick brown fox " +
"jumps over " +
"the lazy dog";

Linhas literais com modelo:

let string = `The quick brown fox
jumps over
the lazy dog`;

Agora estamos a começar a ver que os modelos literais se parecem muito com os motores de modelos. Vamos ver como isso poderia se parecer:

let data = { greeting: 'Hello', name: 'Josh' };
let template = `<p>${data.greeting} {data.name}</p>`;
element.innerHTML = template;// output = <p>Hello Josh</p>

Um template literal adicionou os dados do objeto na string para nós usarmos. Nós podemos usar variáveis e objetos para informar os dados na string. Tudo entre as chaves encaracoladas é avaliado, desde números a condições até funções.

Matéria:

let number = `${2 * 5}`;// output = 10

Condição interna:

let time = 'night';
let string = `Good ${time === 'night' ? 'evening' : 'day'}, Josh`;// output = Good evening, Josh

Posicionando tudo junto, poderíamos construir funções para lidar com conteúdo repetido como um array.

Função: