JavaScript Inserir Variável na String

1. Use literais de modelo para inserir variáveis ​​em strings em JavaScript
2. Use a formatação básica para inserir a variável na string em JavaScript
3. Use sprintf() para inserir a variável na string em JavaScript
4. Conclusão

Este artigo apresentará como inserir variáveis ​​em uma string em JavaScript.

Use literais de modelo para inserir variáveis ​​em strings em JavaScript

O conceito de literais de modelo já existe há algum tempo no JavaScript. Eles eram conhecidos anteriormente como strings de modelo. Literais de modelo foram introduzidos no ES6. Ele oferece uma maneira mais fácil de incorporar variáveis ​​em uma determinada frase do que ter que usar concatenações de string complicadas. Em vez de usar aspas (aspas duplas ou simples), usamos literais de modelo definidos com crases (caractere ` no teclado). Colocamos a string nas crases e incorporamos nossas variáveis ​​na frase. A seguir estão os usos de literais de modelo.

Apenas incluir uma string em um conjunto de crases por si só torna um valor de string. Ele tem a mesma funcionalidade de manter o texto da string entre aspas duplas ". O código de exemplo a seguir descreve uma string simples usada como um literal de modelo.

console.log(`Hello World`);

Resultado:

Hello World

Temos uma string normal pronta. Se tivermos que exibir o valor de uma variável nesta string, precisamos incorporar variáveis. Durante a incorporação, envolvemos a variável entre chaves com um sinal $ precedendo-a. A sintaxe para incorporar o valor da variável é ${variableName}. O seguinte trecho de código tem a variável eggCount embutida em uma string usual, com todo o conteúdo encapsulado em crases.

let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);

Resultado:

On easter we decorted 20 easter eggs

Incorporando Expressões Envolvendo Variáveis

Ao contrário da mera concatenação de string, com literais de modelo, podemos incluir expressões com mais de uma variável, semelhante à codificação em JavaScript com os literais de modelo. Se precisarmos fazer certas operações como somar, obter substrings, incluindo datas, etc., todas essas funcionalidades e muito mais podem ser embutidas em uma string com literais de modelo. O conjunto de códigos a seguir tem uma variedade de casos de uso para fazer isso.

let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);

Resultado:

Sum of 5 and 10 is 15

Outro exemplo envolvendo data é o seguinte. Aqui, não usamos nenhuma variável, mas as expressões incluídas nos literais de modelo funcionam por si mesmas. São as strings com javascript em continuação com a necessidade de usar aspas duplas ou crases repetidamente, como faríamos com a concatenação de frases:

console.log(`The date today is ${new Date().getDate()}-${
    new Date().getMonth() + 1}-${new Date().getFullYear()}`);

Resultado:

The date today is 7 - 4 - 2021

Observações

• Os literais de modelo oferecem uma das maneiras mais fáceis de incorporar variáveis ​​em uma frase.
• Também oferece suporte para incluir expressões diretamente na string e deixar o compilador resolver os cálculos em tempo de execução.
• Agora podemos incluir facilmente aspas simples e duplas em uma string sem usar caracteres de escape.
• Literais de modelo tornam a codificação simples, concisa, organizada e legível.
• O valor dos literais do modelo pode ser atribuído a uma nova variável. Pode ser considerado como uma nova string contendo os valores de suas variáveis.

Use a formatação básica para inserir a variável na string em JavaScript

Outra maneira de inserir perfeitamente os valores das variáveis ​​em nossa string é usando a formatação básica com suporte em JavaScript. Usando o JavaScript console.log(), podemos evitar a concatenação e adicionar marcadores de posição na string direcionada. Os valores a serem atribuídos são passados ​​como argumentos, conforme mostrado abaixo.

let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));

Resultado:

Sum of 5 and 10 is 15.

Esta resolução de variáveis ​​em valores funciona apenas com console.log(). Portanto, não podemos usá-lo para atribuir a uma variável diferente, e não podemos usá-lo para exibir a nova string resolvida na IU HTML.

Observações

• Podemos usar este método durante o registro com a função console.log(). Portanto, esse método não funcionará para atribuir valores a uma variável. Portanto, pode não valer a pena outros cenários além do registro.
• Ao usar a formatação básica, os marcadores usados ​​na string devem corresponder ao tipo de dado passado como parâmetro. Por exemplo, para exibir um valor numérico, o espaço reservado na frase deve ser %d para o tipo de dados de string é %s.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Resultado:

Sum of 5 and 10 is 15.

Se esquecermos de considerar o tipo de parâmetro passado, existe uma incompatibilidade de tipo. JavaScript tentará fazer o typecast da variável e adicionará o valor resultante à string. O código a seguir explica esse fenômeno.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);

Resultado:

5 of 10 and 15 is NaN.

op1 é do tipo de dados Number e estamos usando %s para injetá-lo na string final. O %s irá converter automaticamente o número para um tipo de dados de string. Essa conversão ocorre sem problemas. Mas para a variável operation, o valor é atribuído a um marcador que vem a seguir na sequência. Este espaço reservado é %d. Portanto, aqui um tipo de dados de string está sendo convertido em um número. A conversão não acontece. Portanto, o resultado retornado é NaN, que vemos como a palavra final da saída.

Podemos usar expressões nos parâmetros, como vimos no caso de (op1 + op2). O javascript entende e resolve isso como uma soma em conformidade.

Nesse caso, não podemos usar aspas duplas na string final sem usar os caracteres de escape. No entanto, podemos usar aspas simples se estivermos encapsulando toda a estrutura entre aspas duplas. Veja o seguinte código.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Resultado:

'Sum' of 5 and 10 is 15.

Use sprintf() para inserir a variável na string em JavaScript

Antes de Literais de modelo no ES6 de JavaScript, a comunidade de desenvolvimento seguia a biblioteca rica em recursos sprintf.js. A biblioteca possui um método chamado sprintf(). sprintf.js é uma biblioteca de código aberto para JavaScript. Tem suas implementações para Node.js e navegadores. Para instalação e configurações, você pode visitar a página do git-hub. sprintf() é usado para incluir as variáveis ​​em uma string sem usar a concatenação de string. O uso é o seguinte.

let sprintf = require('sprintf-js').sprintf;

let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Resultado:

Sum of 5 and 10 is 15.

Ele possui vários recursos especiais úteis, como segue.

• A função sprintf() permite especificar as variáveis ​​em uma ordem diferente.
• Como a funcionalidade de literais de modelo, sprintf() resolve expressões encapsuladas em strings.
• Possui suporte para diversos formatos. Além da string e número padrão, a biblioteca sprintf-js suporta formatos booleanos, binários, etc., para enviar os valores das variáveis ​​para uma string.
• Além disso, você pode especificar os argumentos como um array usando o método vsprintf() fornecido pela biblioteca.
• Também permite passar objeto diretamente no segundo argumento e resolve as variáveis ​​automaticamente.

Existem muitos outros recursos que esta biblioteca oferece. Mais detalhes podem ser encontrados no arquivo Read.me especificado em seu link GitHub.

Conclusão

Quando se trata de incluir os valores das variáveis ​​em sua string sem ir para as tediosas concatenações de string usando o + e aspas duplas, sua melhor opção será ir para os literais de modelo, o recurso com crases. Se exigirmos a inserção de valores na string de saída apenas para fins de registro, a função console.log() do JavaScript é útil. Possui as opções de formatação incluídas por padrão. A biblioteca sprintf.js é rica em recursos e domina o espaço, pois oferece muito mais do que os Literais de modelo quando se trata de incorporar os valores das variáveis. Mas isso tem um pequeno custo de familiarização com a biblioteca.