Template Strings com ES6

Concatenar variáveis e textos em javascript agora ficou mais fácil!

Até o surgimento das template strings, todo texto incluído dentro de aspas simples ou duplas é considerado uma seqüência de caracteres. Havia ainda a limitação de que o texto deveria ser escrito em apenas uma linha, a menos que se usasse o operador +. Não havia nenhuma maneira de inserir dados nessas sequências de outra forma. Desde então, tínhamos que escrever linhas de código com concatenação estranhas, como no exemplo:

var nome = 'Pedro';
var idade = 42;

console.log("Olá, meu nome é " + nome + ",e tenho " + idade + "anos");

Com a chegada do ES6, tem-se um novo tipo de sequência literal, delimitada com o caracter (`). Essas sequências de caracteres podem incluir novas linhas, e há uma interpolação de caracteres para concatenar variáveis:

var nome = 'Pedro';
var idade = 42;

console.log("Olá, meu nome é ${nome},e tenho ${idade} anos");

Especialmente para o caso do Angular 2, no atributo template do decorador @Component, essa funcionalidade se torna extremamente útil. Tome o exemplo:

import { Component } from 'angular2/core';
...
@Component({
selector: 'meu-componente',
template: `
<h1>Olá</h1>
<p>Bem vindo ao seu componente</p>
`
})
export class Tutorial{
...
}

Aqui, não precisamos usar o operador +para criar novas linhas no template HTML. Falaremos mais sobre a estrutura de componentes Angular 2 nos próximos posts.

Se gostou do tutorial, curta e compartilhe!

Like what you read? Give Adson Rocha a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.