Em TS, strings delimitadas por (`) suportam o uso de placeholders, ou seja, o seu local terá seu conteúdo substituído por algum valor. Os placeholders são identificados, dentro de uma string, por $ e delimitados por {}.

Para utilizar variáveis como placeholders, informamos dentro de uma placeholder a variável desejada como na sintaxe abaixo:

Sintaxe

`${variavel|constante}`

Exemplo 1

let produto:string = 200;
let preco:number = 1.99
console.log(`codigo:${produto} preço:${preco}`);

Saída

codigo:200 preço:1.99

Os placeholders não estão restritos ao uso de variáveis, podemos utilizá-los em conjunto com operadores aritméticos, ou outros, para criar expressões complexas.

Sintaxe

"`${expressao}`"

Exemplo 2

let a:number = 1;
let b:number = 2;
let c:number[] = [2,4,6]
console.log(`${c[a]*c[b]}`);
console.log(`${ a > b ? a : b}`);

Saída

24
2

Propriedades e métodos de objetos também podem ser utilizados como placeholders. O acesso às propriedades e métodos é feito utilizando o operador (.).

Sintaxe

`${nome_objeto.nome_atributo}`
`${nome_objeto.nome_metodo('<argumentos>'}`

Exemplo 3

let obj = {
  nome: 'Fulano',
  metodo: function(){
    return 100;
  }
}

console.log(`${obj.nome}`);
console.log(`${obj.metodo()}`);

Saída

Fulano
100

O assunto objeto será visto com mais detalhes em TypeScript: Objetos.

Como métodos são funções atribuídas a objetos, podemos usá-la como placeholder, incluindo a passagem de argumentos. Os argumentos devem ser passados utilizando aspas simples (').

Sintaxe

`${nome_funcao('arg1','arg2','argN')}`

Exemplo 4

function funcao(p){
  return p*2;
}
console.log(`${funcao('2')}`);

Saída

4

1. 27/08/2025 - revisão 3 - ajustes: pontuais, objetivos e sintaxes
2. 13/09/2024 - revisão 1 - 'Interpolação com funções' reescrito, ajustes gramaticais
3. 27/02/2024 - versão inicial