5

Estou lendo o ng-book 2 sobre Angular 2 e em um dos exercícios surgiu uma dúvida. Ao configurar meu componente primeiro código não exibe os valores title e link no console, porém o segundo funciona perfeitamente.

O primeiro utiliza aspas simples. ' '. Já o segundo utiliza acentuação, . Qual a diferença e por que de não funcionar?

// Não Funciona    
addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean{
        console.log('${title.value} ${link.value}');
        return false;
      }

// Funciona    
addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean{
        console.log(`${title.value} ${link.value}`);
        return false;
      }

2 Respostas 2

7

As strings definidas com backticks/crases (`) permitem interpolação (embutir expressões no meio da string sem precisar fechar sua delimitação e concatená-la com outra string), multilinhas (não precisar escapar uma quebra de linha dentro da string ou concatenar duas strings em linhas diferentes) e processamento (tagging/parse, onde você pode usar uma função pré-definida).

Esta forma de definição é nativa do JavaScript e é chamada de template literals a partir do ES2015 e de template strings anteriormente. (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals)

Exemplos de uso de template literals:

`texto` # simples 'string text'

`texto linha 1
texto linha 2` # multilinha equivalente a 'texto linha 1\ntexto linha 2'

`texto ${variavel} texto` # interpolação

function tag(literais, ...expressoes) {
    let resultado = "";

    for (let i = 0; i < expressoes.length; i++) {
        resultado += literais[i];
        resultado += expressoes[i].toUpperCase();
    }
    resultado += literais[literais.length - 1];

    return resultado;
}

tag `texto ${variavel} texto` # parse
2

Tanto no TypeScript quanto no JavaScript a partir do ES2015 é possível usar o delimitador de backtick.

Com ele a string passa ser gabaritada, então pode colocar expressões de código dentro da própria string, além de poder continuá-la na linha seguinte, ou seja, ela faz interpolação da string.

Então o primeiro funciona, só não faz o que espera. Com aspas normais aquilo é um texto como outro qualquer, ele não interpreta como um trecho de código a ser executado.

Coloquei no GitHub para referência futura.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .