Conviértase en un maestro de las cadenas con esta guía de JavaScript para formatear, interpolar y más.
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 firstName = "John";
const lastName = "Doe";
let stringVal;
stringVal = firstName.concat(" ", lastName);
console.log(stringVal);
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) e 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 firstName = "John";
const middleName = "Mike";
const lastName = "Doe";
let stringVal;
stringVal = firstName + " " + middleName + " " + lastName;
console.log(stringVal);
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 firstName = "John";
const lastName = "Doe";
let stringVal;
stringVal = firstName;
stringVal += " ";
stringVal += lastName;
console.log(stringVal);
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.
let html;
html = `<ul>
<li> Name: John Doe </li>
<li> Age: 24 </li>
<li> Job: Software Engineer </li>
</ul>`;
document.body.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.
let html;
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>";
document.body.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.
let userName = "Jane Doe";
let age = 21;
let job = "Web Developer";
let experience = 3;
let html;
html = `<ul>
<li> Name: ${userName} </li>
<li> Age: ${age} </li>
<li> Job Title: ${job} </li>
<li> Years of Experience: ${experience} </li>
<li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li>
</ul>`;
document.body.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.