Métodos esenciales de strings en JavaScript

Clase 8 de 39 • Curso de Fundamentos de JavaScript

Resumen

Domina los métodos de strings en JavaScript con ejemplos claros y aplicables. Aquí verás cómo contar caracteres, extraer porciones, dividir, limpiar, normalizar, buscar, validar y reemplazar texto, además de entender por qué los strings son primitivos inmutables y cómo esto impacta tu código.

¿Qué métodos de strings debes dominar en JavaScript?

Aprender a manejar texto te permite validar entradas, formatear resultados y construir funciones robustas. Los pilares aquí son: length, slice, substring, split, trim, normalización con toLowerCase y toUpperCase, búsqueda con includes, validación de inicio y fin, y replace para reemplazos controlados.

¿Cómo contar caracteres con length?

La propiedad length devuelve cuántos caracteres tiene un texto. Úsala para validar si un string está vacío o si cumple un tamaño mínimo.

const texto = "hola mundo";
texto.length; // 10

¿Cómo extraer porciones con slice y substring?

slice extrae desde índice de inicio hasta fin sin incluir el fin. Acepta índices negativos para contar desde el final.
substring es similar pero no admite negativos.

const texto1 = "JavaScript es genial";
texto1.slice(0, 10);   // "JavaScript"
texto1.slice(11);      // "es genial"
texto1.slice(-6);      // "genial"

const texto2 = "hola mundo";
texto2.substring(0, 4); // "hola"

¿Cómo dividir, limpiar y normalizar texto?

Separar en partes, eliminar espacios y unificar mayúsculas/minúsculas evita errores comunes al procesar datos, por ejemplo al comparar entradas de un formulario.

¿Cómo separar en un array con split?

split divide un string usando un separador y devuelve un array.

const texto3 = "línea uno, línea dos, línea tres";
texto3.split(", "); // ["línea uno", "línea dos", "línea tres"]

Cambiar el separador cambia cómo se parte el texto: puede ser espacio, coma u otro carácter.

¿Cómo quitar espacios con trim?

trim elimina espacios al inicio y al final. También existen sus submétodos para solo el inicio o solo el final.

const crudo = "  hola mundo  ";
crudo.trim();      // "hola mundo"
// submétodos:
crudo.trimStart(); // elimina al inicio
crudo.trimEnd();   // elimina al final

¿Cómo estandarizar mayúsculas y minúsculas?

Para comparar textos sin errores, lleva todo a un mismo plano con toLowerCase o toUpperCase.

const palabra = "JavaScript";
palabra.toLowerCase(); // "javascript"
palabra.toUpperCase(); // "JAVASCRIPT"

¿Cómo buscar, validar y reemplazar contenido?

Antes de procesar datos, verifica si un texto contiene lo que esperas, si empieza o termina con una cadena concreta y reemplaza partes cuando sea necesario. Recuerda: los strings son inmutables.

¿Cómo saber si un texto incluye una palabra?

includes confirma la presencia de una subcadena y devuelve true o false.

const contenido = "aprende JavaScript desde cero";
contenido.includes("JavaScript"); // true
contenido.includes("Python");     // false

¿Cómo validar inicio y fin de un texto?

Útil para revisar prefijos o extensiones de archivos.

const archivo = "documento.md";
archivo.startsWith("doc"); // true
archivo.endsWith(".md");   // true

Esto permite validaciones como tipo de documento o extensión esperada.

¿Cómo reemplazar sin mutar el original?

replace crea un nuevo string con el cambio; el original no se altera porque los strings son primitivos inmutables.

const texto6 = "hola mundo, hola JavaScript";
const cambiado = texto6.replace("hola", "hi");
// cambiado: "hi mundo, hola JavaScript"
// texto6 sigue igual: "hola mundo, hola JavaScript"

Puntos clave para fijar aprendizaje:

length: cuenta caracteres.
slice y substring: extraen partes, solo slice acepta índices negativos.
split: divide en array por separador.
trim: limpia espacios; sus submétodos atienden inicio o fin.
toLowerCase/toUpperCase: normalizan para comparación confiable.
includes: búsqueda rápida que retorna true/false.
Validación de prefijo y sufijo: inicio y extensión, como en "documento.md".
replace: reemplaza sin modificar el original por la inmutabilidad de los strings.

¿Con qué caso de uso te gustaría practicar estos métodos: validación de formularios, limpieza de datos o manejo de nombres de archivos? Cuéntalo en los comentarios y probamos juntos.

Pablo Diaz

student•

Algo a destacar en esta clase es que Oscar cuando explica los métodos .toLowerCAse() y .toUpperCase() dice de manera clara en que situaciones nos funcionaria como programadores. Gracias.

Marco Antonio Evangelista Armenta

student•

Lidia Andrade Martínez

student•

// ============================================
// Reto: Métodos esenciales de strings en JavaScript
// ============================================
// Practica length, slice, split, trim, toLowerCase, includes,
// startsWith, endsWith y replace. Los strings son inmutables.
// Ejecuta los tests con: npx vitest src/05-metodos-strings
// ============================================

// --- Reto 1: Contar caracteres con length ---
// Recibe un string "texto". Retorna la cantidad de caracteres (usa la propiedad length).
function contarCaracteres(texto) {
  // Tu código aquí
  return texto?.length;
}

// --- Reto 2: Extraer porción con slice ---
// Recibe "texto", "inicio" y "fin" (índices). Retorna la porción desde inicio hasta fin (sin incluir fin).
// Si fin no se pasa o es undefined, extrae hasta el final del string.
// Usa el método slice.
function extraerConSlice(texto, inicio, fin) {
  // Tu código aquí
  let textoModificado = '';
  if(!fin || fin === undefined) {
    textoModificado = texto.slice(inicio);
  } else {
    textoModificado = texto.slice(inicio, fin)
  }
  return textoModificado;
}

// --- Reto 3: Extraer desde el final con slice (índice negativo) ---
// Recibe "texto" y "n" (número). Retorna los últimos "n" caracteres del string.
// Usa slice con índice negativo: slice(-n).
function extraerDesdeFinal(texto, n) {
  // Tu código aquí
  let ultimosCaracteres = texto ? texto.slice(-n) : "";
  return ultimosCaracteres;
}

// --- Reto 4: Dividir en array con split ---
// Recibe "texto" y "separador" (string). Retorna un array con las partes del texto
// divididas por el separador. Usa el método split.
function dividirEnPartes(texto, separador) {
  // Tu código aquí
  let textoSeparado = texto ? texto.split(separador) : [];
  return textoSeparado;
}

// --- Reto 5: Limpiar espacios con trim ---
// Recibe un string "texto" que puede tener espacios al inicio y/o al final.
// Retorna el mismo texto sin espacios al inicio ni al final. Usa trim.
function limpiarEspacios(texto) {
  // Tu código aquí
  let textoSinEspacios = texto ? texto.trim() : "";
  return textoSinEspacios;
}

// --- Reto 6: Normalizar a minúsculas ---
// Recibe un string "texto". Retorna el texto en minúsculas usando toLowerCase.
// Útil para comparaciones sin importar mayúsculas/minúsculas.
function normalizarMinusculas(texto) {
  // Tu código aquí
  let textoMinusculas = texto ? texto.toLowerCase() : "";
  return textoMinusculas;
}

// --- Reto 7: Saber si incluye una subcadena con includes ---
// Recibe "texto" y "subcadena". Retorna true si el texto incluye la subcadena, false si no.
// Usa el método includes.
function incluyeSubcadena(texto, subcadena) {
  // Tu código aquí
  let contieneSubcadena;
  contieneSubcadena = texto?.includes(subcadena);
  return contieneSubcadena;
}

// --- Reto 8: Validar inicio con startsWith ---
// Recibe "texto" y "prefijo". Retorna true si el texto empieza con el prefijo, false si no.
// Útil para validar prefijos (ej: nombre de archivo, protocolo).
function empiezaCon(texto, prefijo) {
  // Tu código aquí
  let tienePrefijo = texto ? texto.startsWith(prefijo) : false;
  return tienePrefijo;
}

// --- Reto 9: Validar fin con endsWith ---
// Recibe "texto" y "sufijo". Retorna true si el texto termina con el sufijo, false si no.
// Útil para validar extensiones de archivo (ej: "documento.md" termina con ".md").
function terminaCon(texto, sufijo) {
  // Tu código aquí
  let tieneSufijo = texto ? texto.endsWith(sufijo) : false;
  return tieneSufijo;
}

// --- Reto 10: Reemplazar sin mutar con replace ---
// Recibe "texto", "buscar" y "reemplazo". Retorna un NUEVO string donde la primera
// ocurrencia de "buscar" se sustituye por "reemplazo". El original no se modifica (inmutabilidad).
// Usa el método replace.
function reemplazarPrimera(texto, buscar, reemplazo) {
  // Tu código aquí
  let textoReemplazado = texto ? texto.replace(buscar, reemplazo) : "";
  return textoReemplazado;
}

module.exports = {
  contarCaracteres,
  extraerConSlice,
  extraerDesdeFinal,
  dividirEnPartes,
  limpiarEspacios,
  normalizarMinusculas,
  incluyeSubcadena,
  empiezaCon,
  terminaCon,
  reemplazarPrimera,
};

oscar Ivan Toro Gonzalez

student•

// metodos principales en string

const texto = "Hola Mundo";

console.log(texto.length);

// slice

const texto1 = "Aprendiendo Javascript";

console.log(texto1.slice(0, 11)); //aprendiendo

console.log(texto1.slice(12)); //Javascript

console.log(texto1.slice(-10)); /*Javascript cuenta hacia atras des la t

de javascript*/

//substring(inicio,fin)

const texto2 = "Hola bienvenido Javascript";

console.log(texto2.substring(5, 15)); //bienvenido

//split()

const texto3 = "me , encanta , javascript";

console.log(texto3.split(","));

//trim(),trimStart(),trimEnd() elimina espacios de una cadena

const texto4 = " hola Mundo ";

console.log(texto4.trim());

console.log(texto4.trimStart());

console.log(texto4.trimEnd());

//toLowerCase(),toUpperCase()

const texto5 = "Javascript";

console.log(texto5.toLowerCase());

console.log(texto5.toUpperCase());

//includes()// nos dice si una palabra esta o no en la cadena

const texto6 = "bienvenido a Javascript";

console.log(texto6.includes("Javascript"));

console.log(texto6.includes("Python"));

//starWith(),enWith()

const texto7 = "hola mi nombre es Oscar";

console.log(texto7.startsWith("h"));

console.log(texto7.endsWith("r"));

//replace() ,replaceAll(reemplaza texto

const texto8 = " hola Javascript, me encanta Javascript";

console.log(texto8.replace("Javascript", "Python"));

console.log(texto8.replaceAll("Javascript","Java"));

Métodos esenciales de strings en JavaScript

Fundamentos Javascript

Primeras líneas de JavaScript en la consola del navegador

Construye un editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

Var, let y const: qué cambia en JavaScript

Tipos de datos en JavaScript: primitivos vs complejos

Operadores aritméticos en JavaScript

Template literals en JavaScript: sintaxis y uso práctico

Métodos esenciales de strings en JavaScript

Coerción de tipos en JavaScript explicada

Igualdad débil vs estricta en JavaScript

Operadores lógicos AND, OR y NOT en JavaScript

If, else y else if en JavaScript

Switch en JavaScript: cuándo y cómo usarlo

Bucles for, while y for...of en JavaScript

while en JavaScript: evita bucles infinitos

Funciones, Scope y Estructuras de Datos

Anatomía de funciones en JavaScript

Scope en JavaScript: global, función y bloque

Closures en JavaScript: estado privado en cuentas

Qué es un array y cómo funciona en JavaScript

Objetos en JavaScript: claves, acceso y optional chaining

Destructuración de objetos en JavaScript

Map y filter: manipula arreglos de objetos

find, filter y reduce: cuándo usar cada uno

Primeras funciones del sistema de notas

Avanzar en nuestro proyecto leyendo código ajeno

DOM y Experiencia en el Navegador

Seleccionar elementos del DOM con JavaScript

Renderizado dinámico de opiniones con JavaScript

Eventos del DOM: click, hover y keydown en JavaScript

Formularios en JavaScript: preventDefault y localStorage

LocalStorage con JSON.stringify y JSON.parse

Manipulación del DOM en sistema de notas

Modulos y Asincronía

ES Modules: cómo dividir código en JavaScript

Asincronía en JavaScript: callbacks y promesas

Async/await vs promesas en JavaScript

Fetch en JavaScript: peticiones HTTP reales

Landing de productos con Fake API en JavaScript

Revisar código generado por IA en pull requests

Eliminar notas con confirmación en JavaScript

Cierre de fundamentos de JavaScript