Cómo manipular datos con el formato string en JavaScript

Contenido del Bootcamp Dirigido por: | Última modificación: 18 de marzo de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Como desarrollador web, es posible que trabajes con todo tipo de datos: desde números y fechas hasta complejas estructuras de datos. Uno de los tipos más comunes son las cadenas de texto o el formato string. Seguro que mucho de tu trabajo como desarrollador implica manipular, formatear y jugar con strings. ¿Quieres recoger el nombre de un usuario de un formulario web? Eso es un formato string. ¿Necesitas mostrar una fecha en un formato específico? También trabajas con strings. ¿Estás intentando guardar un artículo de blog en tu base de datos? Sí, eso es un string también.

¿Qué es el formato string en JavaScript?

Las cadenas de formato, también conocidas como string format, son un tipo de datos en JavaScript que representan una secuencia de caracteres. Esta secuencia puede incluir letras, números, símbolos y hasta la fecha y hora.

let cadena = "¡Hola, KeepCoding!";
let fecha = new Date().toString();

En estas dos líneas de código, hemos definido dos cadenas de formato string. La primera es un saludo amistoso a nuestra comunidad y la segunda es la representación en string de la fecha y hora actuales.

Pongamos un ejemplo cotidiano. Imagina que estás construyendo un sitio de comercio electrónico y un cliente realiza una búsqueda. Esa cadena de búsqueda es un string y necesitarás saber cómo manipularla para encontrar los productos que el cliente quiere. O quizás estás desarrollando un chat y quieres asegurarte de que ciertos emojis se muestran cuando un usuario teclea determinadas palabras. Eso significa que tendrás que buscar en los strings, reemplazar partes de ellos y quizás incluso usar expresiones regulares.

Dar formato a una cadena de texto

Para manipular y dar formato a las cadenas de texto, JavaScript nos ofrece una serie de métodos muy útiles que podemos llamar sobre cualquier objeto de tipo string. Aquí te dejo los más comunes:

  1. concat(): nos permite unir dos o más cadenas de texto.
  2. slice(): extrae una parte de la cadena de texto.
  3. toLowerCase() y toUpperCase(): cambian todas las letras de la cadena a minúsculas o mayúsculas, respectivamente.

Dar formato a la fecha y la hora

Si quieres dar formato a la fecha y la hora en JavaScript, tendrás que trabajar con el objeto Date y luego convertirlo a un format string.

let fecha = new Date();
let fechaFormat = fecha.toLocaleDateString();

En este caso, toLocaleDateString() nos devuelve la fecha en un formato más humano y fácil de leer.

¿Y qué pasa con HTML?

En HTML, casi siempre estaremos trabajando con cadenas de texto. Incluso el código que escribes es una cadena de texto. Por ejemplo, si quieres agregar un párrafo a tu página web, puedes usar JavaScript para crear un formato string que contenga ese párrafo.

let parrafo = "<p>¡Hola, KeepCoding!</p>";

Como ves, la cadena de texto que hemos creado es HTML y la hemos escrito a mano. ¡Así de poderosas pueden ser las cadenas de texto en JavaScript!

Los strings son fundamentales en el desarrollo web. Saber cómo manipularlos con JavaScript te abrirá un mundo de posibilidades y hará que tu código sea más eficiente, limpio y, en última instancia, más eficaz. No es simplemente una habilidad útil, sino una necesidad absoluta para cualquier desarrollador web. Así que, aunque pueda parecer un tema básico, no subestimes la importancia de entender el formato string en JavaScript.

Pon en práctica esta teoría

Hasta aquí llega la teoría, ahora toca practicar. Te animamos a experimentar con estos métodos y a explorar todas las posibilidades que te ofrece el formato string en JavaScript.

Recuerda que en KeepCoding te ofrecemos el Desarrollo Web Full Stack Bootcamp, donde podrás aprender de manera intensiva todo lo relacionado con la programación y el desarrollo web. No solo aprenderás a manipular cadenas de texto en JavaScript, sino que te convertirás en un desarrollador full stack capaz de crear aplicaciones web completas. ¡Pide información ahora y da el salto que te cambiará la vida!

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado