Formato de string JavaScript – como usar a interpolação de string em JS

Formato de string JavaScript – como usar a interpolação de string em JS

8 de September, 2020 0 By António César de Andrade


A adição de literais de modelo no ECMAScript 6 (ES6) nos permite interpolar strings em JavaScript.

Em palavras mais simples, podemos usar marcadores de posição para injetar variáveis ​​em uma string. Você pode ver um exemplo de interpolação de string usando literais de modelo no snippet abaixo:

const age = 4.5;
const earthAge = `Earth is estimated to be ${age} billion years old.`;

console.log(earthAge);

Primeiramente, você verá que estamos usando crases para literais de template. Além disso, também temos o formato de ${placeholder}, que nos permite inserir um valor dinâmico na string. Qualquer coisa dentro ${} é avaliado como JavaScript.

Por exemplo, poderíamos escrever Earth is estimated to be ${age + 10} billion years old., e funcionaria como se fizéssemos const age = 4.5 + 10;.

Como fizemos isso antes?

Antes dos literais de modelo, teríamos feito assim:

const earthAge = "Earth is estimated to be " + age + " billion years old.";

Como você pode ver, já temos muitas aspas para uma string simples. Imagine que temos que inserir um punhado de variáveis. Ele pode se transformar rapidamente em uma string complexa que não é muito legível. Assim, os literais de modelo tornam as strings mais limpas e legíveis.

No entanto, este é apenas um caso. Vamos ver mais casos de uso para literais de modelo.

Strings multilinhas

Outro uso útil de strings de modelo são strings de várias linhas. Antes dos literais de modelo, usamos n para novas linhas, como em console.log('line 1n' + 'line 2').

Por duas linhas, isso pode ser bom. Mas imagine que queremos cinco linhas. Novamente, a string se torna desnecessariamente complexa.

const earthAge = `Earth is estimated to be ${age} billion years old.

Scientists have scoured the Earth searching for the oldest rocks to radiometrically date.

In northwestern Canada, they discovered rocks about 4.03 billion years old.
`;

O trecho acima demonstra mais uma vez como é simples e limpo escrever strings de várias linhas com literais de modelo.

Como exercício, tente converter a string acima para usar concatenação e nova linha n.

Expressões

Com literais de modelo, também podemos usar expressões nas strings. O que isso significa?

Por exemplo, podemos usar expressões matemáticas, como a multiplicação de dois números. O snippet abaixo ilustra exatamente isso:

const firstNumber = 10;
const secondNumber = 39;
const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`;

console.log(result);

Sem os literais de modelo, teríamos que fazer algo assim:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + ".";

Escrever uma string como a acima pode rapidamente se tornar complexo e confuso. Como continuamos vendo, os literais de modelo tornam mais fácil e mais elegante incorporar expressões na string.

Operador ternário

Com a interpolação de string, podemos até usar um operador ternário dentro de uma string. Isso nos permite verificar o valor de uma variável e exibir coisas diferentes dependendo desse valor.

Vejamos o exemplo abaixo:

const drinks = 4.99;
const food = 6.65;
const total = drinks + food;

const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.`

console.log(result);

No exemplo acima, verificamos se o valor total é superior a dez dólares, por exemplo.

Se o valor for superior a dez, informamos ao usuário que o pagamento com cartão será recusado. Caso contrário, o pagamento com cartão é aceito. Como você pode ver, a interpolação de strings nos permite fazer coisas legais com strings.

A adição de literais de modelo no ES6 nos permite escrever strings melhores, mais curtas e mais claras. Também nos dá a capacidade de injetar variáveis ​​e expressões em qualquer string. Essencialmente, tudo o que você escrever dentro das chaves (${}) é tratado como JavaScript.

Assim, podemos usar literais de modelo para:

  • escrever strings multilinhas
  • expressões incorporadas
  • escrever strings com o operador ternário

Se você gosta do que escrevo, é provável que ame o que eu envio. Considere assinar o meu lista de correio. Se vocês são não sou fã de newsletters, podemos sempre manter contato Twitter.





Fonte

Click to rate this post!
[Total: 0 Average: 0]