Literais de modelo em JavaScript | Explicado

JavaScript é uma linguagem de programação da web de alto nível que nos fornece um tipo de dados de string, onde podemos armazenar strings. Strings podem ser implementadas com citações únicas ou citações duplas ("ou" ") em JavaScript. var mystring = "Hello World!";

No entanto, o tipo de dados da string é limitado e não oferece muitas funcionalidades, como uma linguagem de programação de alto nível (Python, Ruby), dá a seus desenvolvedores. Este problema foi resolvido quando o JavaScript introduzido Literais de modelo em ES6. Vamos ver quais literais de modelo estão em JavaScript neste post.

Literais de modelo

Os literais de modelo nos oferecem a capacidade de trabalhar com strings com mais controle e mais poder sobre o tipo de dados tradicional de string. Ao contrário das cordas, o uso de literais de modelo Backticks “ em vez de aspas simples ou duplas, como mostrado abaixo:

var myString = 'Olá mundo!';

Alguns dos recursos do modelo String nos fornecem:

• Interpolação: atribuindo variáveis ​​e expressões dentro de um modelo literal.
• Strings multilinas: não precisamos /n Para ir a outra linha, simplesmente vamos para outra linha no modelo literal e o navegador sabe que ele precisa mostrar essa string em outra linha.
• Modelos marcados: ele muda o modelo literal e depois de alterar o modelo Litetal retorna a sequência resultante. Modelos marcados são como funções com a exceção de que são chamadas sem o () parêntese.

Vamos explorar esses recursos um por um:

Interpolação

Variáveis ​​e expressões podem ser facilmente interpoladas em cordas usando literais de modelo. Incorporar uma expressão dentro do modelo literal é conhecida como Interpolação. Podemos alcançar a interpolação usando o $ algumvar sintaxe. Vamos ver um exemplo:

var myString = 'Olá mundo!';
console.log ('ele disse: $ myString');

No código acima, estamos inicializando uma variável e acessando -a dentro de uma string usando a sintaxe de interpolação. E para exibir o resultado no console, estamos usando o console.Método Log ():

Cordas multilinas

Outra aplicação do modelo literal é que ele nos dá a capacidade de gerenciar ou escrever strings facilmente em várias linhas. Antes dos literais de modelo, foi um pouco difícil e complicado, pois tínhamos que usar a barragem dentro de citações duplas para dizer ao navegador que a string deveria estar na próxima linha. Por exemplo:

var mystring = "hello \ n"+"mundo!";
console.log (mystring);

No código acima, inicializamos uma string e usamos \ n para dizer ao navegador que a corda depois \ n deve estar na próxima linha.

Agora, vamos ver como podemos alcançar a mesma funcionalidade usando o modelo literal, onde simplesmente escreveremos a segunda sequência em outra linha:

var myString = 'Olá
Mundo!';
console.log (mystring);

Podemos ver que os literais de modelo tornaram muito fácil para nós escrever cordas multilinas e é mais facilmente legível e compreensível.

Modelos marcados

Outro modelos de características poderosos que os literais nos dão são os modelos marcados que simplesmente modificam uma string de modelo, anexando um nome de função ao início da string de modelo. Em palavras mais simples, um modelo marcado altera o modelo literal e retorna a sequência resultante.

Os modelos marcados são definidos exatamente como uma função, no entanto, quando você chama uma tag de modelo, você não usa o () parêntese. A sintaxe para inicializar uma função de tag é dada abaixo:

função tagname (literais,… substituições)
// Retorne alguma string

A função de tag exige dois argumentos; o primeiro é o Literais que indicam as cordas literais e o segundo é o … Substituições em que as entradas subsequentes analisadas para cada substituição são armazenadas.

Agora, vejamos um exemplo para implementar uma função de tag:

// modelo de tag
função mytagname (mystring)
retornar mystring;

// Criando modelo marcado
const output = myTagName'Hello Name ';
// Exibir resultado
console.log (saída);

No código acima, criamos uma função que está retornando uma string. Depois disso, criamos um modelo marcado e chamamos a função do modelo de tag acima para a qual a sintaxe usada é: MyTagname'hello Nome ' onde o mytagname é a tag de modelo e o Olá, nome é o modelo literal. No final, exibimos o resultado usando o console.Método Log ():

Vamos agora olhar para outro exemplo em que passaremos literais, bem como substituições da função de tag:

// valores
Let Greet = "Olá!";
deixe o nome = "jhon";
// função de tag
Função Transform (literais,… substituições)
console.log (literais); // ["", " meu nome é "]
console.log (substituições); // ["Hello", "Jhon"]

// Função literal da etiqueta de chamada
transformar '$ greet meu nome é $ name';

No código acima, primeiro definimos a função de tag de transformação que recebe dois argumentos; “Literais” que é uma matriz e tem conteúdo estático (“meu nome é”) enquanto o parâmetro Rest Substitutions também é uma matriz com todas as tags (cumprimentando, nome). A saída do código acima é mostrada abaixo:

Conclusão

A sequência de dados de dados padrão fornecida por JavaScript não foi poderosa o suficiente, portanto, Javascript Introduzido Modelo Literais em ES6. Os literais de modelos nos dão mais poder sobre as cordas e são inicializados usando backticks ““. Neste post, vimos quais literais de modelo estão em JavaScript, juntamente com o modelo de características que os literais nos oferecem sobre a string javascript padrão.