Cargando...

Métodos de cadena

Ya sabes escribir una cadena. Esta sesión trata de métodos: herramientas que llamas sobre el texto para cambiar mayúsculas, cortar un trozo, limpiar espacios, sustituir palabras o preguntar «¿aparece esta frase?». No memorices todos los métodos del lenguaje; empieza con un juego corto y útil.

¿Cómo funcionan los métodos de cadena en JavaScript?

Un método de cadena se llama con punto, nombre y paréntesis: "hi".toUpperCase(). La mayoría devuelve una cadena nueva. El original no cambia salvo que guardes el resultado (let clean = raw.trim()). Para empezar: toUpperCase / toLowerCase, slice, trim, replace (primera coincidencia), includes (sí/no) e indexOf (posición o -1).

Caja de herramientas de métodos

📊 Métodos de texto que el principiante usa primero

Idea Ejemplo Resultado / nota
Mayúsculas "hi".toUpperCase() "HI"
slice "JavaScript".slice(0, 4) "Java" (el índice final no entra)
trim " hi ".trim() "hi"
replace "a-a".replace("-", "/") "a/a" (solo la primera coincidencia)
includes "hello".includes("ell") true
indexOf "hello".indexOf("l") 2 (primer índice; si falta = -1)

Cambiar mayúsculas y minúsculas

toUpperCase() y toLowerCase() crean una cadena nueva con letras uniformes. Útil antes de comparar lo que escribió el usuario.

Mayúsculas y minúsculas

javascript 
let city = "Tehran";
console.log(city.toUpperCase());
console.log(city.toLowerCase());
console.log(city);

Cortar un trozo con slice

slice(start, end) copia desde start hasta antes de end. Sin end llega al último carácter. Los índices empiezan en 0.

Cortar una cadena con slice

javascript 
let word = "JavaScript";
console.log(word.slice(0, 4));
console.log(word.slice(4));
console.log(word);

Limpiar espacios de los bordes con trim

La entrada del usuario suele traer espacios al inicio o al final. trim() los quita; los del medio se quedan.

Limpiar espacios con trim

javascript 
let raw = "  hello  ";
let clean = raw.trim();
console.log(raw.length);
console.log(clean.length);
console.log(clean);

Sustituir texto con replace

replace(old, new) cambia la primera coincidencia de old por new. El resto no se toca. (Cambiar todas las coincidencias viene después.)

Sustituir la primera coincidencia

javascript 
let line = "red-blue-red";
console.log(line.replace("-", "/"));
console.log(line);

Buscar con includes e indexOf

includes(piece) responde sí/no (true / false). indexOf(piece) da el índice de la primera coincidencia, o -1 si no está.

includes e indexOf

javascript 
let msg = "Welcome guest";
console.log(msg.includes("guest"));
console.log(msg.includes("admin"));
console.log(msg.indexOf("come"));
console.log(msg.indexOf("x"));

Título limpio en la página

Haz trim, unifica mayúsculas y muestra el resultado con textContent.

La página muestra un título limpio

html 
<!DOCTYPE html>
<html>
<head>
<title>String methods — clean title</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "  javaScript methods  ";
let title = raw.trim().toUpperCase();
document.getElementById("out").textContent = title;
</script>
</body>
</html>

El párrafo muestra el título limpio. Cambia solo raw, recarga y comprueba trim y mayúsculas.

Pruébalo tú

  1. Registra "Tehran".toUpperCase() y "Tehran".toLowerCase(); si lo guardas en una variable, mira también el original.
  2. De "JavaScript", corta los cuatro primeros con slice y luego desde el índice 4 hasta el final.
  3. Haz trim de " hi " y compara .length antes y después.
  4. En "a-b-c", sustituye el primer "-" por "/"; registra resultado y original.
  5. En una frase corta, comprueba includes de una palabra presente y otra ausente; registra indexOf de una letra.
  6. En el demo HTML cambia solo raw, recarga y lee el título nuevo.

Errores frecuentes

  • Escribir toUpperCase sin () — hace falta la llamada: .toUpperCase()
  • Esperar que "hi".toUpperCase() cambie el original — devuelve uno nuevo; asígnalo si lo necesitas
  • Creer que slice(0, 4) incluye el índice 4 — el final queda fuera
  • Suponer que replace cambia todas las coincidencias — por defecto solo la primera
  • Usar solo indexOf cuando quieres un sí/no claro — includes se lee mejor

Resumen

  • Llama métodos con . + nombre + ()
  • toUpperCase / toLowerCase cambian mayúsculas; slice corta; trim limpia bordes
  • replace cambia la primera coincidencia; includes / indexOf buscan dentro
  • Suelen devolver un valor nuevo — guárdalo si quieres conservarlo
  • Siguiente: booleanos — true y false para decisiones sí/no

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 11 de 13
Javascript Tutorial