Um novo elemento adicionado no ES6 é o literal de modelo. É um novo tipo para criar strings em JavaScript que adiciona vários novos recursos importantes, como a capacidade de criar strings de várias linhas e incluir uma expressão em uma string. Como desenvolvedor, todos esses recursos podem aprimorar suas habilidades para manipular strings e permitir que você crie strings dinâmicas.
Este post ilustrará literais de modelo e como usá-los em JavaScript.
O que são literais de modelo JavaScript (cadeias de modelo)?
“ Literais Modelo ” são comumente conhecidos como “ Strings de modelo ”. Eles são cercados pelo backtick ( “ ), em comparação com aspas em strings. Seus espaços reservados são indicados pelo cifrão “ $ ”, e chaves {} Curti ' ${expressão} ” é aceitável em literais de modelo. Se você quiser usar uma expressão, você pode colocá-la no “ ${expressão} ” dentro dos backticks.
Um literal de modelo é uma versão aprimorada de uma string JavaScript padrão. As substituições fazem uma distinção significativa entre um literal de modelo e uma string comum. Você pode integrar variáveis e expressões em uma string usando substitutos. Essas variáveis e expressões terão seus valores substituídos automaticamente pelo mecanismo JavaScript.
Sintaxe
Use a sintaxe abaixo para declarar uma única string usando literais de modelo:
` texto de string `
Para várias linhas, siga a sintaxe fornecida:
` linha de texto de string 1
linha de texto de string
Se você deseja adicionar expressão dentro dos acentos graves, a seguinte sintaxe é usada:
Confira os exemplos a seguir para desenvolver uma melhor compreensão do conceito declarado.
Exemplo 1: declarar uma string de linha única usando literais de modelo JavaScript
Normalmente, para criar uma string, é necessário usar aspas simples ou duplas, mas em literais de modelo, você pode criar uma string da seguinte forma:
console.log ( ` LinuxHint ` ) ;
A saída mostra que funciona da mesma forma que a simples criação de sting com a ajuda de aspas simples ou duplas:
Exemplo 2: Declare uma string de várias linhas usando literais de modelo JavaScript
Normalmente, para imprimir várias linhas, usamos o operador de concatenação (+) e para adicionar uma nova linha, (\n) pode ser utilizado, o que muitas vezes pode tornar o código complexo:
console.log ( 'Bem-vindo ao LinuxHint. \n ' + 'O melhor site para aprender habilidades.' ) ;
Enquanto para usar literais de modelo, você pode iniciar uma nova linha pressionando enter no teclado no bloco de backticks:
O melhor site por aprendendo habilidades. ` ) ;
Resultado
Exemplo 3: String com substituições de expressão
Aqui, primeiro vamos criar duas variáveis “ x ' e ' S ”, com os valores “ vinte ' e ' quinze ”, respectivamente:
var x = vinte ;var y = quinze ;
Em seguida, crie uma variável “ soma ” para adicionar o “ x ' e ' S ”:
Se você deseja adicionar dois números e exibir a soma desses números no console, normalmente, é necessário concatenar as strings e variáveis no formato de string regular, o que geralmente cria uma confusão para usar aspas simples ou duplas repetidamente com as strings e juntá-las entre si e com as variáveis usando ( + ):
Enquanto, usando os literais do modelo, você só precisa especificar as strings com variáveis como uma expressão dentro do “ ${} ” no bloco de backtick:
Resultado
Reunimos todas as informações essenciais relacionadas aos literais do modelo.
Conclusão
“ Literais Modelo ', também conhecido como ' Strings de modelo ”, é uma versão melhorada de uma string JavaScript padrão cercada pelo acento grave ( “ ), em comparação com aspas em strings. Ele permite a criação de strings de uma e várias linhas sem o uso do operador de concatenação e inclui uma expressão em uma string. Este post discutiu literais de modelo em JavaScript com exemplos explicados.