Introdução
Ao trabalhar com strings, podem surgir situações que exijam que adicionemos dinamicamente um valor específico a tal string para que ela ainda retorne uma string, o ato de fazer isso é chamado de interpolação de string.
Esse valor dinâmico pode ser uma variável, estado ou qualquer outra coisa que contenha o valor real a ser incorporado na string.
Neste guia, veremos como implementar a interpolação de strings no React, levando em consideração as várias instâncias que podem exigir interpolação de strings e como elas podem ser alcançadas.
Interpolação de String em ES5 e ES6
A interpolação de strings pode ser realizada de duas maneiras: concatenação e literais de modelo. Embora alguns argumentem que a concatenação não é interpolação de strings, a interpolação de strings refere-se à capacidade de criar strings fazendo substituição de espaço reservado, o que a concatenação claramente faz.
Antes da introdução de literais de modelo no ES6, sempre usávamos concatenação, o que se torna muito difícil ao lidar com strings de várias linhas que exigem a substituição de muitas variáveis. Quando os literais de modelo foram introduzidos no ES6, eles se mostraram muito mais fáceis de implementar, especialmente para strings mais longas ou de várias linhas nas quais queremos incorporar expressões.
Neste guia, examinaremos os dois métodos e, em seguida, executaremos alguns exemplos com literais de modelo, que é a abordagem recomendada.
Interpolação de String em Reagir com Concatenação
O método padrão para concatenação é fazer uso do +
operador em torno da variável ou estado particular:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
No código acima, temos o estado de fontSize
que tem um valor de large
. Queremos que a classe seja buscada dinamicamente - por exemplo, pode ser text-small
, text-large
, text-medium
, etc. Dependendo do estado, um className
será assim aplicado ao título!
Com a concatenação, primeiro colocaremos nossa string real e depois usaremos o+
operador para interpolar a variável com a string real, para que possa retornar o valor interpolado:
O método acima fica complexo quando somos duas ou mais variáveis, e principalmente se as strings forem adicionadas dentro de outra string, e não até o final.
Interpolação de string para reagir com literais de modelo
Este é o melhor método para lidar com a interpolação de strings. Ele foi adicionado no ES6 e desde então se tornou o método mais usado para interpolação de strings. Usando literais de modelo de string, vamos repetir o exemplo anterior:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Como podemos ver no código acima, não usamos mais o operador plus em literais de template, em vez disso, usamos backticks para a string inteira e depois usamos o cifrão e chaves para inserir nossas variáveis e valores dinâmicos.
A declaração é avaliada e const fontSize
é inserido na string.
Vamos ver mais alguns exemplos de interpolação de strings React!
Como fazer uso da interpolação de string para passar valores de estilo no React
Em uma situação em que temos nossos dados de estilo armazenados em uma variável que queremos usar para estilizar um texto internamente no React, podemos fazer uso de literais de modelo:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Como dissemos anteriormente, o cifrão e as chaves são usados para manter nosso espaço reservado, e isso retornará o estilo da maneira correta:
Também poderíamos realizar a avaliação dentro das chaves, suponha que queremos que o número seja multiplicado:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Como fazer uso de interpolação de string com expressões em React
Até agora, vimos que podemos realizar avaliações; também é importante notar que podemos adicionar expressões dentro das chaves para obter o valor correto com base na expressão e usá-lo:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Como interpolar várias sequências de linhas com literais de modelo
Como dissemos anteriormente, os literais de modelo facilitam a adição de espaços reservados a strings de várias linhas:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
No código acima, vemos como é fácil usar literais de modelo em comparação com o uso de concatenação:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Como fazer uso de operadores lógicos com literais de modelo
Até agora vimos como passar expressões com operadores ternários, também é melhor vermos que os operadores lógicos também podem trabalhar com literais de modelo:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Conclusão
Aprendemos como implementar a interpolação de string usando dois métodos padrão neste artigo, bem como o quão poderosos os literais de modelo podem ser. Desde a introdução dos literais de modelo, a maioria das pessoas prefere usá-los devido à simplicidade de uso e à legibilidade do código significativamente melhor.
- '
- &
- a
- habilidade
- Conta
- alcançado
- Aja
- adicionado
- Apesar
- sempre
- Outro
- app
- aplicado
- abordagem
- por aí
- artigo
- tornam-se
- MELHOR
- Melhor
- classe
- código
- comparado
- integrações
- Recipiente
- contém
- poderia
- crio
- dados,
- lidar
- Dependendo
- diferente
- difícil
- Dólar
- dinâmico
- incorporado
- especialmente
- etc.
- avaliação
- exemplo
- exemplos
- expressões
- Primeiro nome
- guia
- segurar
- Como funciona o dobrador de carta de canal
- Como Negociar
- HTTPS
- executar
- importante
- instância
- IT
- grande
- aprendido
- Line
- linhas
- olhar
- fazer
- Fazendo
- métodos
- mais
- a maioria
- múltiplo
- multiplicado
- número
- operador
- operadores
- particular
- Pessoas
- poderoso
- Reagir
- refere-se
- repetir
- requerer
- retorno
- Retorna
- Dito
- assinar
- desde
- situação
- So
- alguns
- específico
- padrão
- Estado
- Declaração
- Ainda
- estilo
- tomar
- A
- us
- usar
- valor
- vário
- maneiras
- dentro
- Atividades:
- trabalhar
- XML
- anos