Trabajar con métodos de strings en JavaScript te permite manipular texto de forma precisa: contar caracteres, extraer porciones, reemplazar palabras o validar contenido. Si estás aprendiendo a programar, dominar estos métodos es clave para construir formularios, validaciones y proyectos reales.
¿Cómo cuento los caracteres de un string en JavaScript?
El método más básico y a la vez más usado es length, que devuelve la cantidad de caracteres que tiene un texto. Si escribes texto.length sobre la cadena "Hola mundo", obtienes 10 como resultado [0:30].
¿Para qué sirve length en JavaScript? Para saber cuántos caracteres tiene un string y validar si contiene o no contenido. Es muy popular cuando necesitas verificar que un campo no esté vacío.
Esta validación se vuelve indispensable cuando trabajas con formularios o necesitas confirmar que un usuario ingresó información antes de procesarla.
¿Cómo extraigo una parte de un string?
Aquí entran dos métodos hermanos: slice y substring. Ambos extraen porciones de texto, pero tienen diferencias importantes.
Slice con posiciones positivas y negativas
Con slice le pasas la posición de inicio y de fin. Sobre el texto "JavaScript es genial" puedes hacer lo siguiente [1:20]:
texto1.slice(0, 10) devuelve JavaScript.
texto1.slice(11) devuelve es genial al omitir el final.
texto1.slice(-6) devuelve genial recorriendo desde el final.
La gran ventaja de slice es que acepta valores negativos, ideal para tomar los últimos caracteres sin calcular la longitud total.
Substring y su limitación con negativos
Substring funciona muy parecido: recibe inicio y fin. Sobre "Hola, mundo", texto2.substring(0, 4) te devuelve Hola [2:40]. La diferencia clave es que substring no trabaja con números negativos, por eso la recomendación práctica es usar slice casi siempre.
¿Cómo divido un texto en partes con split?
Cuando tienes una cadena como "línea uno línea dos línea tres" y necesitas convertirla en un arreglo, usas split indicando el separador [3:10]. Si pasas un espacio, obtienes cada palabra como elemento. Si cambias el separador a una coma, divide el texto donde encuentre comas.
Es una herramienta poderosa para procesar listas, CSV o cualquier dato que venga concatenado.
¿Cómo limpio espacios en blanco de un string?
El método trim elimina los espacios al inicio y al final de un texto [3:50]. Tiene dos submétodos útiles:
trimStart elimina solo los espacios del principio.
trimEnd elimina solo los espacios del final.
trim elimina ambos al mismo tiempo.
Esto resulta vital cuando recibes datos de usuarios que sin querer escriben espacios extra.
¿Cómo cambio mayúsculas y minúsculas en JavaScript?
Los métodos toLowerCase y toUpperCase son tus aliados cuando trabajas con formularios [4:30]. Las personas escriben con mayúsculas, minúsculas o combinaciones, y si intentas comparar texto sin normalizar, la comparación falla.
¿Cuándo uso toLowerCase y toUpperCase? Cuando necesitas comparar dos textos sin importar cómo estén escritos. Conviertes ambos al mismo formato y luego comparas.
Por ejemplo, si tienes "JavaScript" con la S en mayúscula intermedia, puedes transformarlo todo a minúsculas con texto.toLowerCase() antes de hacer cualquier validación.
¿Cómo verifico si un string contiene una palabra?
El método includes retorna true o false según si el texto buscado existe dentro de la cadena [5:30]. Sobre la constante "Aprende JavaScript desde cero":
contenido.includes("JavaScript") devuelve true.
contenido.includes("Python") devuelve false.
Es un método clave para hacer validaciones rápidas, perfecto para el manejador de notas que se construirá como proyecto del curso.
¿Cómo sé si un texto empieza o termina con cierta palabra?
Los métodos startsWith y endsWith responden exactamente eso. Si tienes la constante archivo = "documento.md" [6:20]:
archivo.startsWith("doc") devuelve true.
archivo.endsWith("md") devuelve true.
archivo.endsWith("js") devuelve false.
Esto te permite identificar extensiones de archivo o prefijos sin tener que partir manualmente la cadena. Cuando manipulas documentos, sabes al instante qué tipo de información estás recibiendo.
¿Cómo reemplazo texto dentro de un string?
El método replace sustituye una porción de texto por otra. Sobre "Hola, mundo. Hola, JavaScript", replace("Hola", "Hi") cambia solo la primera ocurrencia y te devuelve "Hi, mundo. Hola, JavaScript" [7:30].
Y aquí viene lo interesante: el string original no cambia. Si imprimes la variable original, sigue intacta.
¿Por qué replace no modifica el string original? Porque los strings son primitivos inmutables en JavaScript. Cada método crea una nueva posición en memoria con el resultado, sin tocar el valor original.
Esta regla aplica para todos los métodos que viste: slice, substring, trim, toLowerCase, replace y los demás. Siempre obtienes un nuevo string, nunca una mutación del anterior.
Conceptos y habilidades clave de la clase
Inmutabilidad de strings: los métodos no modifican el original, crean uno nuevo en memoria [8:20].
Diferencia entre slice y substring: slice acepta índices negativos, substring no.
Normalización de texto: usar toLowerCase o toUpperCase antes de comparar evita errores en formularios.
Validación con includes, startsWith y endsWith: tres métodos esenciales para verificar contenido y formato.
¿Cuál de estos métodos crees que vas a usar más en tu próximo proyecto? Cuéntame en los comentarios qué validaciones se te ocurren combinando estos métodos.
// ============================================// 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).functioncontarCaracteres(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.functionextraerConSlice(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).functionextraerDesdeFinal(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.functiondividirEnPartes(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.functionlimpiarEspacios(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.functionnormalizarMinusculas(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.functionincluyeSubcadena(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).functionempiezaCon(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").functionterminaCon(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.functionreemplazarPrimera(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,};
Comparto el código que hice para los ejercicios
// ============================================// 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).functioncontarCaracteres(texto){// Tu código aquíreturn texto.length;}console.log(contarCaracteres('test'));// --- 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.functionextraerConSlice(texto, inicio, fin){// Tu código aquí}return texto.slice(inicio,fin);}console.log(extraerConSlice('JavaScript',4,10));// --- 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).functionextraerDesdeFinal(texto, n){// Tu código aquíreturn texto.slice(-n);}console.log(extraerDesdeFinal('texto negativo',9));// --- 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.functiondividirEnPartes(texto, separador){// Tu código aquíreturn texto.split(separador);}console.log(dividirEnPartes('item1,item2,item3',','));// --- 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.functionlimpiarEspacios(texto){// Tu código aquíreturn texto.trim();}console.log(limpiarEspacios(' Este es el texto para limpiar '));// --- 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.functionnormalizarMinusculas(texto){// Tu código aquíreturn texto.toLowerCase();}console.log(normalizarMinusculas('HOLA'));// --- 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.functionincluyeSubcadena(texto, subcadena){// Tu código aquíreturn texto.includes(subcadena);}console.log(incluyeSubcadena('Curso de JavaScript','JavaScript'));// --- 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).functionempiezaCon(texto, prefijo){// Tu código aquíreturn texto.startsWith(prefijo);}console.log(empiezaCon('Texto de prueba','Texto'));// --- 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").functionterminaCon(texto, sufijo){// Tu código aquíreturn texto.endsWith(sufijo);}console.log(terminaCon('Este es el texto de prueba','prueba'));// --- 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.functionreemplazarPrimera(texto, buscar, reemplazo){// Tu código aquíreturn texto.replace(buscar,reemplazo);}console.log(reemplazarPrimera('Reemplazar este texto','texto','fragmento'));module.exports={ contarCaracteres, extraerConSlice, extraerDesdeFinal, dividirEnPartes, limpiarEspacios, normalizarMinusculas, incluyeSubcadena, empiezaCon, terminaCon, reemplazarPrimera,};
Alguien me podria explicar la differencia entre == y ===. He travajado con vb y ahi solo existe =. Y en vb, = se usa para asignar y comparar ala ves.
Gracias
La verdad que felicidades al profesor, es excelente explicando, y dan ganas de seguir viendo el curso.
Ya un mes sin entrar al curso y me ha encantado esta clase. En el bootcamp donde estoy nos han sacado el jugo con JS y JV y me doy cuenta que esto me habría servido en las entrevistas hace 8 días jajajja, que básico pero que importante es. 💖
// ============================================// 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).functioncontarCaracteres(texto){return(texto.length);// Tu código aquí}// --- 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.functionextraerConSlice(texto, inicio, fin){return texto.slice(inicio,fin);// Tu código aquí}// --- 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).functionextraerDesdeFinal(texto, n){return texto.slice(-n)// Tu código aquí}// --- 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.functiondividirEnPartes(texto, separador){return texto.split(separador);// Tu código aquí}// --- 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.functionlimpiarEspacios(texto){return texto.trim();// Tu código aquí}// --- 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.functionnormalizarMinusculas(texto){return texto.toLowerCase();// Tu código aquí}// --- 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.functionincluyeSubcadena(texto, subcadena){return texto.includes(subcadena);// Tu código aquí}// --- 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).functionempiezaCon(texto, prefijo){return texto.includes(prefijo);// Tu código aquí}// --- 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").functionterminaCon(texto, sufijo){return texto.includes(sufijo);// Tu código aquí}// --- 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.functionreemplazarPrimera(texto, buscar, reemplazo){return texto.replace( buscar, reemplazo);// Tu código aquí}module.exports={ contarCaracteres, extraerConSlice, extraerDesdeFinal, dividirEnPartes, limpiarEspacios, normalizarMinusculas, incluyeSubcadena, empiezaCon, terminaCon, reemplazarPrimera,};
// ============================================
// Reto: Métodos esenciales de strings en JavaScript
// 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) {
return (texto.length);// Tu código aquí
}
// --- 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) {
return texto.slice(inicio,fin); // Tu código aquí
}
// --- 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) {
return texto.slice(-n) // Tu código aquí
}
// --- 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) {
return texto.split(separador); // Tu código aquí
}
// --- 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) {
return texto.trim() ; // Tu código aquí
}
// --- 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) {
return texto.toLowerCase(); // Tu código aquí
}
// --- 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) {
return texto.includes(subcadena); // Tu código aquí
}
// --- 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) {
return texto.includes(prefijo); // Tu código aquí
}
// --- 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) {
return texto.includes(sufijo); // Tu código aquí
}
// --- 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) {
return texto.replace( buscar, reemplazo); // Tu código aquí
}
module.exports = {
contarCaracteres,
extraerConSlice,
extraerDesdeFinal,
dividirEnPartes,
limpiarEspacios,
normalizarMinusculas,
incluyeSubcadena,
empiezaCon,
terminaCon,
reemplazarPrimera,
};
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.
// 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
