El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Métodos de generación, reemplazo y separación

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
La transformación de texto es algo usual en todo sitio web. Muchas veces usamos CSS pero, para otras tantas circunstancias, JavaScript nos permite realizar estas transformaciones a nivel de código facilitándonos el trabajo. Aprende y conoce sobre estos métodos.
06:08

Transcripción

Las situaciones que se nos pueden presentar cuando estamos trabajando con cadenas de texto pueden ser muy variadas, es por eso que también tenemos algunos métodos para generar texto, para reemplazar o para separar. En este caso vamos a generar texto a través de una repetición. Nosotros tenemos una función llamada'repeat', y dentro de esta función llamada'repeat' vamos a invocarla directamente al mensaje, y aquí lo que estamos diciendo es que vamos a repetir lo que hay dentro de mensaje N cantidad de veces. Vamos a trabajar primero con dos veces. Actualizamos nuestro navegador donde estamos probando y vemos que tenemos aquí un texto que dice: "Estoy aprendiendo JavaScript", y sin espacio vuelve a decir nuevamente: "Estoy aprendiendo JavaScript". ¿Qué sucede, por ejemplo, si yo incremento el número a 4? Actualizamos el navegador y tenemos 4 repeticiones almacenadas en esta variable. Y si, de pronto, yo quiero mandar a imprimir 200 caracteres de estos, actualizo mi navegador y tengo 200 repeticiones. Esto puede serte muy útil cuando estés trabajando, por ejemplo, con algunos datos ficticios para poder estar maquetando una página web y necesitas tener mucho texto para llenar algunos bloques. Obviamente, esto durante la etapa de pruebas de tu proyecto. Veamos otro método, que es el método'replace'. Para esto vamos a comentar la línea en la que estábamos trabajando y vamos a remover los comentarios de la línea 14. En este caso vamos a trabajar con el método'replace'. El método'replace'lo que hace es buscar una cadena de texto. La cadena de texto que va a buscar en este caso es la palabra JavaScript, la va a ubicar y la va a reemplazar por el texto que tenemos aquí: "a programar", para que ahora mi leyenda termine diciendo: "Estoy aprendiendo a programar" en lugar de decir "Estoy aprendiendo JavaScript". Actualizamos nuestro navegador y vemos como ahora ya tenemos la leyenda que dice: "Estoy aprendiendo a programar". De esta forma, yo estoy buscando texto en una cadena y lo estoy reemplazando por algo más, pero esto lo que va a hacer con el mensaje es dejarlo completamente intacto. ¿Qué sucede? 'Replace'ejecuta la función y retorna un resultado, pero no afecta el valor original. Vamos a trabajar ahora con el método'slice'. El método'slice'también nos permite realizar algunas cosas, por ejemplo, vamos a almacenar primero en la variable resultado 'mensaje . slice' y para esto simplemente voy a ajustar correctamente el mensaje y debe de quedar de esta manera: 'mensaje. slice'y estoy mandando la posición número 6. Actualizamos nuestro navegador y vemos como lo que está haciendo es colocar el cursor de inicio en la posición 6, por lo cual tú puedes ver que esta palabra de "Estoy" y el espacio ya no es considerado. De hecho, también tú puedes determinar cuánto espacio vas estar ocupando o hasta qué lugar quieres hacer el corte. Por ejemplo, voy a comentar esta línea, les comentaré la de abajo para que tengamos otro ejemplo, y lo que vamos a hacer aquí es lo siguiente. Vamos a escribir'mensaje. slice', que comience en la parte 6 y termine según la cantidad del mensaje. Actualizamos nuestro navegador y vemos que dice "aprendiendo JavaScript". ¿Pero qué pasa si en lugar de mensaje yo necesito hacer un cálculo y necesito quitarle 5 espacios? Lo aplicamos, actualizo y vemos como se corta. Yo necesito ahora quitarle y dejarle 6 espacios. Actualizamos nuevamente y ahora mi texto ha cambiado por una cosa diferente, que dice "aprendiendo Java", lo cual obviamente no es correcto para este curso, pero solamente lo estamos utilizando para tenerlo en caso de ejemplo. De hecho, yo puedo trabajar también de esta manera y escribir aquí un número, puedo dejar ahí el texto 11 y estamos recibiendo solamente este texto. Revisemos el siguiente, que es el método'split'. Este método'split'lo que va a tener es que va a separar toda la cadena de texto en un arreglo, y para esto diremos: 'mensaje. split' y vamos a mandar el texto sobre el cual queremos hacer la separación. Vamos a actualizar nuestro navegador y al momento de actualizar podemos darnos cuenta que tenemos ahora un arreglo con todas las palabras: "Estoy", "aprendiendo", "JavaScript". ¿Esto qué es? Es un arreglo y, simplemente, tenemos todas las palabras distribuidas. ¿Pero qué sucede si tú te encuentras con un mensaje que tiene puros guiones? Entonces aquí, en la parte del'split', lo que vamos a hacer es mandar la separación utilizando los guiones. Actualizamos el navegador y vemos como funciona. Si yo lo dejara con el espacio y actualizo nuevamente, vemos que esto ya no va a tener ninguna función y simplemente me regresa la misma cadena de texto. Y el último método que vamos a tener y que también resulta ser muy efectivo es el método'trim'. Voy a regresar este mensaje al estado original en el que estábamos trabajando y voy a dejar algunos espacios de manera exagerada al inicio y al final de la cadena de texto. Esto, con el objetivo de utilizar este método. El método'trim'lo que va a hacer es eliminar los espacios en blanco que hay antes y después de una cadena, así que actualizamos nuestro navegador y vamos a probar que tenemos el puro texto en blanco. Si yo, por ejemplo, no hubiera puesto el mensaje de'trim', lo voy a quitar aquí, actualizo, vemos como tenemos los espacios en blanco antes y después. Por eso también es importante que muchas veces, cuando estés procesando información como contraseñas, correos electrónicos nombres o cualquier dato de un formulario, siempre le pases este método'trim'para que tengas exactamente la cadena de texto que quieres buscar. De esta forma, hemos revisado casi todos los métodos de búsqueda de texto que existen para que puedas integrarlos directamente a tu proyecto de JavaScript.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.