Los 5 métodos que debes conocer para manipular textos con JavaScript

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:
let saludo = "Bienvenidos a techmaniako",
saludoPalabras = saludo.split(' ') // ['Bienvenidos', 'a', 'techmaniako']Un caso práctico es obtener el número de palabras de un texto:
let saludo = "Bienvenidos a techmaniako",
saludoCantidadPalabras = saludo.split(' ').length // 3También podemos obtener la primera palabra de un texto:
let saludo = "Bienvenidos a techmaniako",
primera = saludo.split(' ')[0] // "Bienvenidos"Obtener la última palabra de un texto:
let saludo = "Bienvenidos a techmaniako",
saludoArray = saludo.split(' '),
ultima = saludoArray[saludoArray.length - 1]Dividir un texto en letras usando un string vacío como separador:
let empresa = "techmaniako",
empresaLetras = empresa.split('') // ['t','e','c','h','m','a','n','i','a','k','o']Texto en reversa:
let texto = 'Hola mama',
textoReversa = texto.split('').reverse().join('') // 'amam aloH'Método .substring (inicio [, fin])
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:
'Hola techmaniako'.substring(2,6) // 'la t' (extrae desde el índice 2 hasta el 5)
'Hola techmaniako'.substring(5) // 'techmaniako' (extra desde el índice 2 hasta el final)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.
'Hola techmaniako'.substring(4,-1) // 'Hola' (4 primeros caracteres)
'Hola techmaniako'.substring(-1,4) // 'Hola' (4 primeros caracteres)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:
'Hola techmaniako'.slice(2,6) // 'la t' (extrae desde el índice 2 hasta el 5)
'Hola techmaniako'.slice(5) // 'techmaniako' (extra desde el índice 2 hasta el final)La diferencia es cuando usamos parámetros negativos, en ese caso se empieza a contar desde el final.
'Hola techmaniako'.slice(-6,8) // 'tec' ('E' es el sexto caracter comenzando a contar desde el final)
'Hola techmaniako'.slice(5,-3) // 'tec' ('c' es el tercer caracter comenzando a contar desde el final)Por ejemplo, si queremos omitir el primer y el último caracter de un texto:
'Hola EDteam'.slice(1,-1) // 'ola techmaniako'Omitir solo los tres últimos caracteres
'Hola techmaniako'.slice(0,-3) // 'Hola tec'O, por ejemplo, extraer solo los últimos cuatro caracteres:
'Hola techmaniako'.slice(-4) // 'iako'Método .substr (inicio [, cantidad])
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:
'Hola techmaniko'.substr(0,4)O si queremos extraer tres caracteres empezando del segundo:
'Hola techmaniko'.substr(1,3)Si [start] es negativo se empieza a contar desde el final:
'Hola techmaniko'.substr(-5,2) // 'ec' ('n' es el quinto caracter comenzando a contar desde el final)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.
'Hola techmaniko'.substr(-25,2) // 'Ho' (25 es mayor que la longitud del texto así que se comienza a extraer desde el principio )Método .replace(‘stringOriginal’,’stringNuevo’)
El método .replace() remplaza el string del primer parámetro por el del segundo parámetro.
'Hola techmaniko'.replace('Hola','Bienvenidos a') // 'Bienvenidos a techmaniko'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.
let saludo = 'Hola mundo'
saludo.replace('mundo','techmaniko')
console.log(saludo) // 'Hola mundo' (no se modifica el string original)let saludo2 = saludo.replace('mundo','techmaniko')
console.log(saludo2) // 'Hola EDteam' (hemos guardado el resultado en una nueva variable)
Espero que hayas disfrutado este artículo y lo encontraste útil. Si es así, no olvides hacer clic en el botón recomendar . Además, me encantaría escuchar sus opiniones sobre nuestro último enfoque.
Para conocer mas tecnologias pueden seguirme en mis redes sociales:
Facebook: https://web.facebook.com/wilbeDEV/
facebook: https://web.facebook.com/TechManiako/
Grupo_facebook: https://web.facebook.com/groups/166091130742535/
YouTube: https: // www.youtube.com/c/WILBERCCORIDEVELOPER
Blogs: https://www.techmaniako.com/ED/
GitHub: https://github.com/wilberCcoriHuman
linkedin: https://www.linkedin.com/in/wilber- ccori-huaman-63389113b /
Me gusta lo que lees? Dele una ronda de aplausos.
Desde un aplauso rápido hasta una ovación de pie, aplauda para mostrar cuánto disfrutaste de esta historia.