Entonces, en los últimos videos,
hemos aprendido a trabajar con cadenas
y también hice un par de ejercicios y un desafío.
Pero mucha gente me ha preguntado
para crear aún más ejercicios de cuerdas.
Y entonces, en esta lección, vamos a resolver básicamente
un desafío más y haz otro buen ejercicio de cuerdas.
Entonces, en algún lugar al comienzo de sus archivos de inicio
tendrás esta cadena de vuelos como esta.
Entonces nuestro objetivo es básicamente transformar
este lío (indistinto) aquí,
cuál es la cadena en esta salida bien formateada
que contiene toda la información que es
en esta cadena aquí, pero luego póngalo de una manera
que es realmente legible para la gente.
Así que supongamos, por ejemplo, que obtenemos esta cadena aquí
de algún tipo de API web.
Y nuestro objetivo en nuestra aplicación.
tiende a mostrar los datos de esta manera.
Entonces, comencemos por echar un vistazo a nuestra cadena aquí
para que podamos pensar en cómo abordar este problema.
Entonces, vemos que tenemos básicamente cuatro líneas de salida aquí.
Entonces, si echamos un vistazo a la cadena, podemos ver
que tenemos aquí esta primera parte,
entonces tenemos este signo más.
Y entonces ya ves que aquí hay otro y otro.
Y esencialmente este signo más,
actúa como separador entre
estos cuatro datos.
Así que estos cuatro vuelos.
Así que este aquí les mostré como el primero.
Entonces aquí tenemos el segundo,
el tercero y el cuarto.
Entonces, comencemos dividiendo eso para que podamos transformar
esta cuerda en estas cuatro piezas.
Y por ahora simplemente bloquearé el resultado de hacer eso
a la consola solo para que podamos echar un primer vistazo a esto.
Así que recuerda que para eso,
vamos a utilizar el método de división.
Así que vuelos.dividir y luego especificamos
por qué carácter queremos dividir la cadena.
Así que dale una caja fuerte, y luego verás que obtenemos esta matriz,
y esta matriz contiene ahora,
estas cuatro piezas de información, entonces estos cuatro vuelos.
Ahora, de nuevo, ves aquí que en realidad tenemos una línea
para cada uno de los vuelos.
Eso significa que queremos bloquear la consola.
una línea para cada vuelo.
Entonces, probablemente deberíamos recorrer esta matriz
y luego crea una cadena como esta
en cada una de las iteraciones.
Y también aprendimos cómo hacerlo en esta sección,
entonces podemos usar el bucle for of.
Entonces digamos que cada uno de ellos es un vuelo
y aquí podemos usar directamente un flight.split
que crea la matriz que acabamos de ver.
Y de nuevo para empezar, registremos cada uno de los vuelos
aquí a la consola en cada iteración
y luego podemos deshacernos de esto,
y aquí estamos tratando de acceder a esa variable de vuelo
pero por supuesto son vuelos.
Entonces esta cadena aquí, y ahora de hecho obtenemos
nuestras cuatro cuerdas aquí bloqueadas por separado a la consola.
Y ahora es el momento de construir realmente
cada una de estas cadenas bien formateadas
fuera de su lío que llegamos aquí.
De nuevo podemos notar que tenemos un elemento
que básicamente divide o separa diferentes piezas
de la información dentro de la cadena.
Así que aquí vemos, tenemos una salida retrasada
y aquí tenemos este código de aeropuerto, aquí otro,
y luego aquí en el momento de la llegada
que es exactamente lo que tenemos en la cadena.
Entonces, aquí tenemos la salida tardía, el código del aeropuerto.
para Farrow, y luego el código de aeropuerto para Berlín.
Entonces, por lo tanto, extraigamos esa información.
de la cuerda otra vez, y así otra vez,
Comenzaré dividiendo esta variable
pero esta vez usando el separador de punto y coma.
Así que exactamente esto, así que verás que ya funcionó.
Y ahora todo lo que tenemos que hacer es obtener estos datos.
fuera de estas matrices, luego formatee cada una de estas
cuatro piezas aquí un poco y luego ensamblar cada una de ellas
en la cuerda final.
Entonces, podemos hacer esto de muchas maneras diferentes,
pero lo que voy a hacer es usar la desestructuración
para sacar estas cuatro piezas de la matriz.
Entonces, recuerde desestructurar, usamos la sintaxis de borrado aquí
sino para especificar variables.
Así que la primera variable aquí, llamémosla el tipo
porque podemos tener salidas y llegadas.
Así que ese es el tipo del que proviene el segundo,
por lo que ven aquí que el primer código de aeropuerto es el de
y el segundo es el to.
Así que de la FAO a TXL.
Así que el tercero es para, y luego el último es el tiempo.
Entonces 1125, que luego transformaremos aquí
en 11H 25 así.
Así que ahora, por supuesto, ya no tenemos la salida.
pero de todos modos, comencemos ahora a crear o generar una cadena aquí.
Así que voy a llamar a esa salida,
y por supuesto, vamos a usar un literal de plantilla
y comenzaré simplemente poniendo esto para las variables
que acabamos de crear aquí,
y entonces podemos formatear cada uno de ellos individualmente.
Eso es tipo, desde, hasta y luego la hora.
Y ya podemos poner eso entre paréntesis,
tal como lo tenemos aquí, y luego para terminar
simplemente bloquearemos eso muy bien en la consola.
Y así, ahora de hecho, tenemos cuatro cuerdas aquí.
Así que ahora formateemos individualmente cada una de estas cuatro piezas.
Y voy a empezar aquí con el tiempo
cual es la mas facil.
Así que aquí solo queremos reemplazar los dos puntos con una H.
Muy bien, eso funcionó maravillosamente.
Y ahora, vamos al tipo.
Entonces ves que en un tipo, siempre tenemos estos guiones bajos
del que por supuesto queremos deshacernos.
Así que aquí debería decir salida retrasada
con un espacio en lugar del guión bajo
y aquí en la llegada básicamente
También quiero deshacerme del guión bajo.
Básicamente, solo vamos a reemplazar el guión bajo
con un espacio vacío.
Así que ahora podemos usar ese método del año 2021
que mencioné antes, pero que no funcionó en ese entonces,
pero ahora que estoy grabando este video, reemplace todo,
en realidad ya funciona en Google Chrome.
Y así, aquí ahora podemos usar, reemplazar todo.
Muy bien, de nuevo, este es un método ES 2021
que es nuevo en JavaScript
y que nos permite reponer todas las incidencias
de una determinada cadena a la vez.
Y de nuevo, vamos a reemplazar el guión bajo
con un espacio
Qué lindo.
Ahora vemos aquí que tenemos este espacio vacío
al principio de cada cadena
pero de eso nos encargaremos luego
porque tendremos que agregar algunas cadenas aquí
o en realidad algunos espacios de todos modos
para crear este formato aquí.
Así que este y todos estos espacios aquí.
Así que no te preocupes por eso por ahora, en cambio,
lo que vamos a hacer ahora es agregar estos puntos rojos aquí.
Estos son en realidad emojis y agregaremos este emoji
siempre que se retrase la salida o la llegada.
Básicamente, para simbolizar que hay un retraso.
Así que esto se aplica tanto a las salidas como a las llegadas como esta.
Básicamente, queremos agregar este emoji cada vez que escriba,
así que es recordar todo esto, así que esto aquí.
Entonces, siempre que esto comience con la cadena retrasada,
entonces queremos agregar este emoji aquí.
Entonces, hagamos eso.
Y en realidad tenemos un método de cadena agradable y fácil para eso.
del que ya hablamos, que es con el que empieza.
Entonces comienza con, y aquí estamos preguntando
si la cadena comienza con retraso,
así que realmente así, y recuerda
que esto va a devolver un lingote.
Y entonces esto es perfecto para luego usar un condicional
como el tornero para devolver algo
en caso de que esto sea para.
Entonces, en caso de que sea así, aquí queremos agregar este emoji
así que podemos venir aquí y copiarlo, pegarlo aquí.
Y si no, entonces simplemente no agregue nada.
Bueno, eso realmente no funcionó.
Todo lo que hizo fue agregar como otro espacio aquí
cual es este de aqui.
Pero creo que sé cuál es el problema,
lo cual, déjame mostrarte esto
iniciando sesión aquí de nuevo, el tipo.
Así que estamos buscando si la cadena,
así que si el tipo de cadena comienza con retrasado
pero de hecho empieza
con _delayed en este punto.
Y por lo tanto tenemos que añadir que aquí
a nuestra prueba también.
Y luego funciona como se esperaba.
Así que quitemos ese registro aquí
y vamos a quitarle ese espacio.
Y ahora tenemos un texto espaciado más uniformemente aquí.
Genial, y en realidad casi hemos terminado aquí.
Todo lo que tenemos que hacer ahora es formatear estos códigos de aeropuerto.
Ahora tenemos todos estos números aquí y aquí también
pero realmente no sirve para nada aquí
para formatear la cadena.
Así que todo lo que queremos son las tres letras aquí,
del que está hecho cualquier código de aeropuerto.
Así que siempre son solo tres letras
pero el número después, no nos importa en absoluto.
Entonces, básicamente, lo que haremos con esta cadena
y tambien esto de aqui, es tomar las tres primeras letras
y luego convertirlos a mayúsculas.
Y entonces eso es todo.
Entonces, hagamos lo que acabo de decir.
Así que usamos el método de división para tomar los tres primeros elementos.
Así que desde la posición cero hasta la tres,
donde tres no está incluido,
así que estamos tomando cero uno y dos
y luego podemos simplemente encadenar el método de dos mayúsculas
en eso, y ahí vamos.
Entonces son cuatro ahora y ahora podemos copiar
lo mismo de aquí a aquí.
Pero en realidad no hagamos eso,
pero crearé un pequeño refactor fuera de aquí.
Entonces, básicamente, cree solo una pequeña función llamada getCode
que obtiene una cadena, y luego de esa cadena,
hace esto
Así que vamos a cortar eso, y eso es todo.
Así que es solo una función de flecha agradable y simple.
solo para el pequeño caso de uso.
Y observe cómo definí esta variable aquí
fuera del bucle, porque de lo contrario,
esta función aquí va a ser definida
una y otra vez que no es necesario.
Así que ahora podemos simplemente representar esto entre paréntesis
y pasarlo a getCode,
y entonces eso tomará esta cadena,
pasarlo a esta función,
que luego hará el formato que queríamos
y lo devolveremos y haremos lo mismo
al destino y, eso es todo.
Entonces, ya casi hemos terminado.
Así que una cadena está bien formateada.
Se ve justo o al menos casi como estos aquí.
Ahora, lo único que es diferente,
es que aqui estan basicamente todos alineados
a la derecha así
para que tengamos estos códigos de aeropuerto aquí
y los tiempos todos en la misma posición
lo que hace que las cadenas sean mucho más fáciles de leer.
¿Y recuerdas cómo podemos hacer eso?
Entonces para eso podemos usar el método padStart
que también presenté hace algún tiempo.
Entonces, podemos hacer eso en toda la cadena.
que termina justo aquí.
Entonces la cadena de salida comienza aquí y termina aquí.
Y ahora queremos aplicar el método padStart
en toda la cadena
así que podemos cambiar eso aquí mismo.
También podríamos ponerlo aquí así,
pero este formato en realidad debería ser una parte
de la propia cuerda.
Así que vamos a editar aquí mismo.
Así que probemos 50 aquí y recordemos que por defecto,
el carácter predeterminado que acariciará la cadena
es un espacio vacío.
Entonces, si regalamos como una caja fuerte ahora, entonces verás que, de hecho,
ahora todo está realmente alineado aquí.
Pero aparentemente 50 es demasiado, probemos con 20,
que en realidad no es suficiente.
Probemos 40 aquí tal vez o 30, solo como un poco
como prueba y error hasta que se ve bien.
Pero 36, lo es.
Así que ahora todo está bien alineado y todas estas cadenas
ahora tienen exactamente 36 caracteres de largo,
que es exactamente lo que hace este padStart.
Entonces, para asegurarse de que la cadena tenga exactamente esta longitud,
y si no es así, sigue agregando la cadena
o así el personaje que definimos aquí.
Así que también podríamos hacer algo así, y luego agregaría
este personaje aquí, pero simplemente queremos un espacio.
Y entonces podemos deshacernos de eso.
Y luego automáticamente agrega este espacio vacío.
Y eso es todo, eso resuelve el problema.
que nos propusimos resolver en un principio.
Y en el camino practicamos muchos de estos métodos
que te mostré antes.
Y también usamos el método IES 2021 aquí,
reemplazar todo por primera vez.
Así que espero que hayas encontrado útil este ejercicio.
y que ahora estás aún más cómodo
trabajando con cadenas por su cuenta.