Manipulación de strings

Clase 12 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

Trabajar con texto es una de las tareas más frecuentes en JavaScript, y dominar los strings marca la diferencia entre escribir código funcional y código realmente eficiente. Desde cómo se crean hasta cómo se transforman, existen múltiples formas de operar con cadenas de texto que todo desarrollador necesita conocer.

¿Cuál es la diferencia entre un string primitivo y un string objeto?

En JavaScript existen dos maneras de crear strings. La primera, y más común, es el string primitivo [0:18]: se declara asignando texto entre comillas simples o dobles a una variable. Por ejemplo:

javascript const stringPrimitivo = 'Soy un string primitivo';

Si usamos el operador typeof sobre esta variable, el resultado será "string". También podemos crear un string primitivo usando la función String() sin la palabra clave new [0:48]:

javascript const stringPrimitivoTambien = String('Soy un string primitivo también');

El resultado de typeof sigue siendo "string". Ambas formas producen valores inmutables, lo que significa que al modificarlos no se altera el valor original, sino que se crea uno nuevo. Este comportamiento se conoce como paso por valor [1:24].

Por otro lado, existe el string objeto [1:36], que se crea usando la palabra clave new:

javascript const stringObjeto = new String('Soy un string objeto');

Al evaluar typeof sobre esta variable, el resultado será "object" [1:56]. La diferencia principal es que estos strings son mutables y heredan las características propias de los objetos en JavaScript.

¿Cómo acceder a caracteres dentro de un string?

Cada carácter de un string tiene un índice que comienza en cero [2:35]. Para acceder a un carácter específico podemos usar dos técnicas.

  • Notación de corchetes: indicamos el índice directamente.
  • Método charAt(): funciona igual, pero con sintaxis de método [3:05].

javascript const saludo = 'Hola. ¿cómo estás?'; console.log(saludo[2]); // "l" console.log(saludo.charAt(2)); // "l"

¿Cómo encontrar la posición de un carácter o palabra?

El método indexOf() devuelve la posición de la primera aparición de un carácter o palabra [3:38]. Si buscamos la letra "o", nos devolverá el índice 1. Si buscamos una palabra completa como "como", nos devolverá el índice donde comienza [4:05].

Cuando el texto buscado no existe dentro del string, indexOf() retorna -1 [4:29]. Para obtener la posición de la última aparición, usamos lastIndexOf() [4:47].

javascript console.log(saludo.indexOf('o')); // 1 console.log(saludo.lastIndexOf('o')); // posición de la última "o" console.log(saludo.indexOf('xyz')); // -1

¿Cómo extraer porciones de texto con slice?

El método slice() recibe dos parámetros: el índice de inicio y el índice de fin más uno [5:00]. Es decir, el segundo parámetro es exclusivo.

javascript console.log(saludo.slice(3, 5)); // "a."

Para conocer la longitud total del string, utilizamos la propiedad length [5:42].

¿Qué métodos permiten transformar y dividir strings?

JavaScript ofrece varios métodos para transformar el contenido de un string sin alterar el original.

  • toUpperCase(): convierte todo el texto a mayúsculas [5:55].
  • toLowerCase(): convierte todo el texto a minúsculas.

javascript console.log(saludo.toUpperCase()); console.log(saludo.toLowerCase());

El método split() divide un string en un array a partir de un separador [6:15]. Si indicamos un espacio como separador, cada palabra se convierte en un elemento independiente del arreglo.

javascript const saludoDividido = saludo.split(' '); console.log(saludoDividido); // ["Hola.", "¿cómo", "estás?"] console.log(saludoDividido[1]); // "¿cómo"

Para eliminar espacios al inicio y al final de un string, usamos trim() [6:56]:

javascript const saludoConEspacios = ' hola mundo '; const saludoSinEspacios = saludoConEspacios.trim(); console.log(saludoSinEspacios); // "hola mundo"

Finalmente, el método replace() permite reemplazar una palabra por otra dentro del texto [7:20]:

javascript const saludoOriginal = 'hola mundo'; const nuevoSaludo = saludoOriginal.replace('mundo', '❤️'); console.log(nuevoSaludo); // "hola ❤️"

Dominar estos métodos abre muchas posibilidades para procesar y presentar texto de forma dinámica. Si conoces otros métodos de strings que uses con frecuencia, comparte tu experiencia en los comentarios.