Guía para la interpolación de cadenas con React

En esta breve guía, aprenda cómo realizar la interpolación de cadenas con React y JavaScript, utilizando el operador más y los literales de plantilla.

Introducción

Al trabajar con cadenas, pueden surgir situaciones que requieran que agreguemos dinámicamente un valor específico a dicha cadena para que aún devuelva una cadena, el acto de hacer esto se conoce como interpolación de cadenas.

Este valor dinámico podría ser una variable, un estado o cualquier otra cosa que contenga el valor real que se incrustará en la cadena.

En esta guía, veremos cómo implementar la interpolación de cadenas en React, teniendo en cuenta las diversas instancias que pueden requerir la interpolación de cadenas y cómo se pueden lograr.

Interpolación de cadenas en ES5 y ES6

La interpolación de cadenas se puede lograr de dos maneras: concatenación y literales de plantilla. Aunque algunos argumentan que la concatenación no es una interpolación de cadenas, la interpolación de cadenas se refiere a la capacidad de crear cadenas mediante la sustitución de marcadores de posición, lo que claramente hace la concatenación.

Antes de la introducción de los literales de plantilla en ES6, siempre habíamos usado la concatenación, lo que se vuelve muy difícil cuando se trata de cadenas de varias líneas que requieren la sustitución de muchas variables. Cuando se introdujeron los literales de plantilla en ES6, resultaron mucho más fáciles de implementar, especialmente para cadenas más largas o de varias líneas en las que queremos incrustar expresiones.

En esta guía, veremos ambos métodos y luego realizaremos algunos ejemplos con literales de plantilla, que es el enfoque recomendado.

Interpolación de cadenas en reacción con concatenación

El método estándar para la concatenación es hacer uso del operador + alrededor de la variable o estado en particular:

1
2
3
4
5
6
7
8
const App = () => {
   const [fontSize] = useState('large');
   return (
      <div className="container">
         <h1 className={"font-bold text-" + fontSize}>Hello World</h1>
      </div>
   );
};

En el código anterior, tenemos el estado de fontSize que tiene un valor grande. Queremos que la clase se obtenga de forma dinámica; por ejemplo, podría ser text-small, text-large, text-medium, etc. Dependiendo del estado, se aplicará un className diferente al ¡Bóveda!

Con la concatenación, primero colocaremos nuestra cadena real y luego utilizaremos el operador + para interpolar la variable con la cadena real, de modo que pueda devolver el valor interpolado:

string interpolation in react

El método anterior se vuelve complejo cuando somos dos o más variables, y sobre todo si las cadenas se suman dentro de otra cadena, y no hasta el final.

Interpolación de cadenas para reaccionar con literales de plantilla {#interpolación de cadenas para reaccionar con literales de plantilla}

Este es el mejor método para lidiar con la interpolación de cadenas. Se agregó en ES6 y desde entonces se ha convertido en el método más utilizado para la interpolación de cadenas. Usando literales de plantilla de cadena, repitamos el ejemplo anterior:

1
2
3
4
5
6
7
8
const App = () => {
   const [fontSize] = useState('large');
   return (
      <div className="container">
         <h1 className={`font-bold text-${fontSize}`}>Hello World</h1>
      </div>
   );
};

Como podemos ver en el código anterior, ya no usamos el operador más en los literales de plantilla, sino que usamos acentos graves para toda la cadena y luego usamos el signo de dólar y las llaves para insertar nuestras variables y valores dinámicos.

La instrucción se evalúa y const fontSize se inserta en la cadena.

¡Veamos algunos ejemplos más de interpolación de cadenas React!

Cómo hacer uso de la interpolación de cadenas para pasar valores de estilo en React

En una situación en la que tenemos nuestros datos de estilo almacenados en una variable que queremos usar para diseñar un texto internamente en React, podemos usar literales de plantilla:

1
2
3
4
5
6
7
8
const App = () => {
   const textSize = 40;
   return (
      <div className="container">
         <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1>
      </div>
   );
};

Como dijimos anteriormente, el signo de dólar y las llaves se usan para mantener nuestro marcador de posición, y esto devolverá el estilo de la manera adecuada:

string interpolation with template literals in react

También podríamos realizar una evaluación dentro de las llaves, supongamos que queremos que el número se multiplique:

1
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Cómo hacer uso de la interpolación de cadenas con expresiones en React

Hasta ahora, hemos visto que podemos realizar evaluaciones; También es importante tener en cuenta que podemos agregar expresiones dentro de las llaves para obtener el valor correcto en función de la expresión y usarlo:

1
2
3
4
5
6
7
8
const App = () => {
   const [showNav, setShowNav] = useState(true);
   return (
      <div className="container">
         <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div>
      </div>
   );
};
Cómo interpolar cadenas de varias líneas con literales de plantilla

Como dijimos anteriormente, los literales de plantilla facilitan agregar marcadores de posición a cadenas de varias líneas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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>
   );
};

En el código anterior, vemos lo fácil que es usar literales de plantilla en comparación con el uso de concatenación:

1
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Cómo hacer uso de operadores lógicos con literales de plantilla

Hasta ahora hemos visto cómo pasar expresiones con operadores ternarios, también es mejor que veamos que los operadores lógicos también pueden funcionar con literales de plantilla:

1
2
3
4
5
6
7
8
const App = () => {
   const [showNav, setShowNav] = useState(true);
   return (
      <div className="container">
         <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div>
      </div>
   );
};

Conclusión

Aprendimos cómo implementar la interpolación de cadenas usando dos métodos estándar en este artículo, así como cuán poderosos pueden ser los literales de plantilla. Desde la introducción de los literales de plantilla, la mayoría de las personas prefieren usarlos debido a la simplicidad de uso y la legibilidad del código significativamente mejor.