Cuando programamos nos vamos a encontrar con la necesidad de manipular texto con mucha frecuencia. Ya sea para pintar datos en pantalla, encontrar fragmentos de URL, obtener el primer nombre de un usuario, etc. Las posibilidades son muchas. En este post te explico los métodos que te ayudarán a manipular strings con JavaScript como un experto.
Método .split('separador')
El método .split() convierte un string en un array usando un string como separador. Por ejemplo, si queremos dividir un texto en palabras, usaremos un espacio en blanco como separador:
1let saludo = "Bienvenidos a EDteam", 2 saludoPalabras = saludo.split(' ') // ['Bienvenidos', 'a', 'EDteam'] 3
Un caso práctico es obtener el número de palabras de un texto:
1let saludo = "Bienvenidos a EDteam", 2 saludoCantidadPalabras = saludo.split(' ').length // 3 3
También podemos obtener la primera palabra de un texto:
1let saludo = "Bienvenidos a EDteam", 2 primera = saludo.split(' ')[0] // "Bienvenidos" 3
Obtener la última palabra de un texto:
1let saludo = "Bienvenidos a EDteam", 2 saludoArray = saludo.split(' '), 3 ultima = saludoArray[saludoArray.length - 1] 4
Dividir un texto en letras usando un string vacío como separador:
1let empresa = "EDteam", 2 empresaLetras = empresa.split('') // ['E','D','t','e','a','m'] 3
Texto en reversa:
1let texto = 'Hola mama', 2 textoReversa = texto.split('').reverse().join('') // 'amam aloH' 3
Método .substring(start $&,end$&)
Extrae un nuevo string desde el índice \$&start\$& hasta el índice \$&end - 1\$&. El parámetro \$&end\$& es opcional y si se omite extrae hasta el final:
1'Hola EDteam'.substring(2,6) // 'la E' (extrae desde el índice 2 hasta el 5) 2'Hola EDteam'.substring(5) // 'EDteam' (extra desde el índice 2 hasta el final) 3
Si cualquiera de los dos parámetros es negativo, se extrae la cantidad de caracteres indicada en el otro parámetro (el positivo). De esta manera podemos obtener los primeros X caracteres de cualquier texto.
1'Hola EDteam'.substring(4,-1) // 'Hola' (4 primeros caracteres) 2'Hola EDteam'.substring(-1,4) // 'Hola' (4 primeros caracteres) 3
Si ambos parámetros son negativos devuelve un string vacío.
Método .slice(start $&,end$&)
El método .slice() es idéntico a .substring(), es decir, extrae una cadena desde el indice \$&start\$& hasta el índice \$&end - 1\$&. El parámetro \$&end\$& es opcional y si se omite extrae hasta el final:
1'Hola EDteam'.slice(2,6) // 'la E' (extrae desde el índice 2 hasta el 5) 2'Hola EDteam'.slice(5) // 'EDteam' (extra desde el índice 2 hasta el final) 3
La diferencia es cuando usamos parámetros negativos, en ese caso se empieza a contar desde el final.
1'Hola EDteam'.slice(-6,8) // 'EDt' ('E' es el sexto caracter comenzando a contar desde el final) 2'Hola EDteam'.slice(5,-3) // 'EDt' ('t' es el tercer caracter comenzando a contar desde el final) 3
Por ejemplo, si queremos omitir el primer y el último caracter de un texto:
1'Hola EDteam'.slice(1,-1) // 'ola EDtea' 2
Omitir solo los tres últimos caracteres
1'Hola EDteam'.slice(0,-3) // 'Hola EDt' 2
O, por ejemplo, extraer solo los últimos cuatro caracteres:
1'Hola EDteam'.slice(-4) // 'team' 2
Método .substr(start $&,quantity$&)
Este método usa el primer parámetro \$&start\$& como índice, pero el segundo como cantidad de caracteres. Por ejemplo, si queremos los cuatro primeros caracteres de un texto:
1'Hola EDteam'.substr(0,4) 2
O si queremos extraer tres caracteres empezando del segundo:
1'Hola EDteam'.substr(1,3) 2
Si \$&start\$& es negativo se empieza a contar desde el final:
1'Hola EDteam'.substr(-5,2) // 'Dt' ('D' es el quinto caracter comenzando a contar desde el final) 2
Si \$&start\$& es negativo y mayor al número de caracteres del texto se tomará como cero. Si \$&end\$& es negativo devolverá un string vacío.
1'Hola EDteam'.substr(-25,2) // 'Ho' (25 es mayor que la longitud del texto así que se comienza a extraer desde el principio ) 2
Método .replace('stringOriginal','stringNuevo')
El método .replace() remplaza el string del primer parámetro por el del segundo parámetro.
1'Hola EDteam'.replace('Hola','Bienvenidos a') // 'Bienvenidos a EDteam' 2
Los strings son valores inmutables
Debes tener en cuenta que en JavaScript los valores primitivos son inmutables, es decir que estos métodos nunca modifican el string original sino que devuelven un nuevo string que debes almacenar en una nueva variable.
1let saludo = 'Hola mundo' 2saludo.replace('mundo','EDteam') 3console.log(saludo) // 'Hola mundo' (no se modifica el string original) 4 5let saludo2 = saludo.replace('mundo','EDteam') 6console.log(saludo2) // 'Hola EDteam' (hemos guardado el resultado en una nueva variable) 7
Si quieres aprender más de JavaScript te recomiendo tomar la Especialización en Desarrollo Web con JavaScript que te lleva desde cero hasta crear tu primera aplicación y obtener tu certificado de culminación. ¡Nos vemos en clases!