¿Cómo se formatea una cadena en JavaScript?

En JavaScript, una cadena es un grupo de caracteres encerrados por un par de comillas simples o dobles. Hay muchas formas de formatear cadenas en JavaScript.

Puede usar métodos u operadores específicos para combinar cadenas. Incluso puede realizar operaciones específicas para decidir qué cadena aparece, dónde y cuándo.

Aprenda a formatear sus cadenas de JavaScript usando métodos de concatenación y literales de plantilla.

Concatenación de cadenas

JavaScript le permite concatenar cadenas usando varios enfoques. Un enfoque útil es el concat() método. Este método utiliza dos o más cadenas. Utiliza una sola cadena de llamada y toma una o más cadenas como argumentos.

const primerNombre = "John";
const apellido = "Gama";
dejar cadenaVal;
stringVal = nombre.concat("", apellido);
consola.log (valor de cadena);

Aquí, concat une los argumentos de cadena (un espacio en blanco y apellido) a la cadena de llamada (nombre). Luego, el código almacena la nueva cadena resultante en una variable (stringVal) y imprime el nuevo valor en la consola del navegador:

Otra forma de concatenar una colección de cadenas es usando el operador más. Este método le permite combinar variables de cadena y literales de cadena para crear nuevas cadenas.

const primerNombre = "John";
const nombre medio = "Miguel";
const apellido = "Gama";
dejar cadenaVal;
cadenaVal = nombre + "" + segundo nombre + "" + apellido;
consola.log (valor de cadena);

El código anterior imprime el siguiente resultado en la consola:

Un tercer enfoque para concatenar sus cadenas de JavaScript requiere el uso de un signo más e igual. Este método le permite agregar una nueva cadena al final de una existente.

const primerNombre = "John";
const apellido = "Gama";
dejar cadenaVal;
stringVal = nombre;
cadenaVal += "";
stringVal += apellido;
consola.log (valor de cadena);

Este código agrega un espacio en blanco y el valor de la variable lastName a la variable firstName, produciendo el siguiente resultado:

Literales de plantilla

Los literales de plantilla son una función de ES6 que le permite formatear cadenas de JavaScript. Un literal de plantilla usa un par de acentos graves (`) para mostrar cadenas. Este método de formato de cadena le permite mostrar cadenas multilínea más limpias en JavaScript.

dejar html;
html = `<ul>
<li> Nombre: John Doe </li>
<li> Edad: 24 </li>
<li> Trabajo: Ingeniero de software </li>
</ul>`;
documento.cuerpo.innerHTML = html;

El código JavaScript anterior utiliza HTML para imprimir una lista de tres elementos en el navegador:

Para lograr el mismo resultado sin los literales de plantilla (o antes de los literales de plantilla), deberá usar comillas. Sin embargo, no podrá extender el código en varias líneas como puede hacerlo con los literales de plantilla.

dejar html;
html = "<ul><li>Nombre: John Doe</li><li>Edad: 24</li><li>Trabajo: Ingeniero de software</li></ul>";
documento.cuerpo.innerHTML = html;

Interpolación de cadenas

Los literales de plantilla le permiten usar expresiones en sus cadenas de JavaScript a través de un proceso llamado interpolación. Con la interpolación de cadenas, puede incrustar expresiones o variables en sus cadenas usando el ${expresión} marcador de posición Aquí es donde el valor de los literales de plantilla de JavaScript se vuelve realmente evidente.

dejar nombre de usuario = "fulano de tal";
dejar edad = 21;
dejar trabajo = "Desarrollador web";
dejar experiencia = 3;
dejar html;
html = `<ul>
<li> Nombre: ${nombre de usuario} </li>
<li> Edad: ${edad} </li>
<li> Título del trabajo: ${trabajo} </li>
<li> Años de experiencia: ${experiencia} </li>
<li> Nivel de desarrollador: ${experiencia < 5? "Junior a Intermedio": "Sénior"} </li>
</ul>`;
documento.cuerpo.innerHTML = html;

El código anterior produce el siguiente resultado en la consola:

Los cuatro primeros argumentos de la ${expresión} placeholder son variables de cadena, pero la quinta es una expresión condicional. La expresión se basa en el valor de una de las variables (experiencia), para dictar lo que debe mostrar en el navegador.

Elementos de formato en su página web con JavaScript

Además de su asociación funcional con el desarrollo de páginas web, JavaScript funciona con HTML para influir en el diseño y la presentación de una página web. Puede manipular el texto que aparece en una página web, como es el caso de los literales de plantilla.

Incluso puede convertir HTML en imágenes y mostrarlas en una página web.