esta es la tercera y ultima parte
de trabajar con cadenas.
Y empecemos aprendiendo sobre
uno de los métodos de cadena más potentes, que se divide.
Entonces dividir nos permite dividir una cadena
en varias partes en función de una cadena divisoria.
Así que vamos a comprobar eso.
Así que cualquier cadena funciona aquí,
digamos
Una+cuerda+muy+bonita.
entonces digamos
que por alguna razón tenemos una cadena como esta
y ahora en esta cadena podemos llamar al método split.
Aquí necesitamos especificar una cadena divisoria.
Así que usemos más,
y entonces lo que pasará ahora es que se dividirá
esta cadena por este signo más
y luego almacenará los resultados
en elementos de una nueva matriz.
Así que vamos a ver eso,
y de hecho obtenemos una matriz que contiene A,
y muy, y bonito, y cuerda.
Básicamente, todo está dividido por esta cadena divisoria.
Así que intentemos lo mismo
con mi nombre.split.
Entonces, el objetivo aquí es tener una matriz,
que dos elementos, uno para cada nombre.
Y así puedo dividir por el espacio.
Y este es uno muy común.
y así de hecho obtengo este resultado
y esto es realmente útil.
Ahora de hecho
ahora podemos usar el poder de desestructuración
para crear variables directamente como esta.
Entonces puedo decir nombre y apellido.
serán los resultados de esta escisión, ¿de acuerdo?
Así que aquí vamos a crear una matriz con dos elementos.
Y luego de esa matriz,
el primero se va a tomar en el primer nombre
y el segundo uno y dos apellido, ¿de acuerdo?
Ahora podríamos haber hecho lo mismo con un método de corte
pero eso hubiera sido mucho mas complicado
y para oraciones más largas o casi imposibles
y así es realmente sencillo.
Bien, ahora digamos que queremos hacer
el apellido en mayúsculas aquí.
Y luego también queremos agregar un Mister al principio.
Así que podríamos usar un literal de plantilla simple
y haz lo que acabo de decir
pero quiero mostrarte algo más aquí.
Y ese es el método conjunto
que es esencialmente lo contrario de split.
Así que vamos a crear una matriz,
que contiene todo lo que acabo de decir.
Así que queremos empezar con el Sr.
Luego el primer nombre
y ese será el segundo elemento de esta matriz
y luego el apellido en mayúsculas, ¿de acuerdo?
Y ahora quiero unirme a esto
y de nuevo podemos especificar una cadena divisoria
y espero que ya puedas ver a dónde va esto.
Así que almacenemos el resultado de esto en un nuevo nombre,
y luego vamos a comprobarlo en la consola.
Entonces, ¿cuál crees que será el resultado de esto?
Así del método conjunto.
Entonces, de hecho, ahora tenemos una cadena completa aquí.
Entonces, una cadena compuesta por las tres partes de esta matriz
y unidos por esta cadena de unión aquí básicamente.
Y, por supuesto, podríamos haber usado cualquier otra cosa.
Así que así, o incluso así.
Así que cualquier cosa funciona aquí,
pero lo que tiene sentido por supuesto en este caso
es solo el espacio.
Así que esta combinación de dividir y unir es realmente poderosa.
y en realidad usaremos esto todo el tiempo
así que divídanse y únanse, ¿de acuerdo?
Y de hecho, podemos usar esto para algo.
que ya hicimos en una de las conferencias anteriores
que es poner en mayúscula un nombre.
Pero ahora con esto lo hace realmente fácil.
para poner en mayúscula un nombre completo con varios nombres allí.
Así que digamos que este pasajero se llama
Jessica Ann Smith Davis.
Entonces, ¿cómo pondremos en mayúscula este nombre aquí?
Y en realidad vamos a escribir una función.
Así que eso es un poco más agradable.
Así que const escribe el nombre en mayúscula,
que es una función que recibe un nombre
y luego hará algo con eso.
Entonces, escribamos el nombre en mayúscula aquí con esa cadena en su lugar.
Y luego también podemos llamarlo con algún otro nombre.
Así que mi nombre, por ejemplo,
y puede usar su propio nombre aquí, por supuesto.
Entonces, ¿cuál es la estrategia para capitalizar todo este nombre?
Y por cierto lo que quiero decir aquí es transformar
la primera letra de cada nombre en mayúscula.
Así que aquí Jonas, y luego este aquí Schmedtmnan
con esta S mayúscula ¿de acuerdo?
Bueno, tenemos varias palabras aquí,
por lo que tendremos que capitalizarlos todos uno a uno.
Y para hacer eso,
sería bueno tenerlos dentro de una matriz
que luego podemos recorrer.
Y ahora podemos usar el método de división para eso.
Así que digamos que nombres es igual a nombre, dividido por el espacio.
Entonces, esto será una matriz y ahora podemos hacer un bucle.
sobre esa matriz usando el bucle four off.
Entonces constante, llamemos a esta palabra
de nombres o llamémoslo N que significa nombre,
pero no puedo reutilizar el nombre
porque eso anularía esto
ingrese aquí y eso es una mala práctica, ¿de acuerdo?
Y ahora aquí pondremos este nombre en mayúsculas.
Así que este nombre individual.
Así que recuerda cómo lo hicimos en la última lección.
tomamos la primera letra y la convertimos a mayúscula
y luego lo unió con básicamente el resto de la palabra.
Así que eso es N.slice
comenzando desde la posición número uno.
Así que todo menos la primera letra.
cuál es la letra número cero, ¿de acuerdo?
¿Y ahora qué debemos hacer con esto?
Bueno, creo que deberíamos llevar esto a una nueva matriz.
para que al final terminemos con una matriz
con todos los nombres en mayúscula
y luego podemos unir esa matriz.
Así que digamos nombres constantes superiores
e iniciarlo como una matriz vacía.
Y luego en cada iteración
simplemente empujaremos en esta matriz.
Así que te suena bien, ¿de acuerdo?
Y ahora al final,
Entonces registrémonos en los nombres de la consola, arriba.
Y ahora tenemos que volver a unir esa matriz
usando un espacio como separador, ¿de acuerdo?
Así que aquí practicamos muchos métodos diferentes
todo en una función.
Así que este es un gran caso de uso.
Así que vamos a intentarlo ahora y de hecho funcionó.
Tan genial, ¿verdad?
No importa qué tan largo sea el nombre que introducimos en la función
siempre nos dará la salida correcta.
Ahora aquí hay un pequeño desafío para ti.
porque hay otra manera de hacer esto.
Así que básicamente de hacer las mayúsculas de un nombre.
Así que dado lo que ya aprendimos
y especialmente en la última conferencia
¿Puedes pensar en una manera diferente de hacer esto?
Y si no puedes, no es un problema en absoluto.
pero tal vez puedas pausar el video aquí por un minuto o dos
y piensa en esto.
Así que déjame mostrártelo rápidamente,
porque creo que esto es muy interesante
que tenemos diferentes maneras de lograr lo mismo.
Entonces, esta vez, ¿qué insertaremos en la matriz aquí?
es simplemente N y luego reemplazamos la primera letra
con la primera letra en mayúscula.
Así que déjame escribir eso.
Así que eso es N en la posición cero
y reemplazado con N en la posición cero a mayúsculas
vamos a intentarlo y obtenemos el mismo resultado, ¿de acuerdo?
Así que de nuevo, estamos aquí simplemente tomando la palabra
y luego reemplazamos el primer carácter.
Así que eso es N en la posición cero
con el primer carácter en mayúsculas.
Así que ese es un enfoque completamente diferente.
que este de aquí,
pero nos da el mismo resultado.
Ahora, a continuación, hablemos sobre el relleno de una cadena.
Ahora rellenar una cadena significa
para agregar un número de caracteres a la cadena
hasta que la cuerda tenga una cierta longitud deseada.
así que relleno
y vamos a crear un mensaje aquí
ir a la puerta 23.
Así que ahora echemos un vistazo al relleno aquí.
Así que tomaré el mensaje,
y luego puedo decir padstart
y entonces esto agregará algunos caracteres
al principio de la cadena.
Y el primer argumento aquí es el
longitud que queremos para la cadena.
Digamos que queremos que tenga 25 caracteres,
así que después del relleno.
Y luego el personaje que
queremos rellenar la cuerda con.
Así que usemos más
y vamos a echar un vistazo, ¿de acuerdo?
Y así lo verás en la edición.
todos estos aquí.
Y ahora la longitud
de toda esta cadena aquí
debe ser 25, ¿de acuerdo?
Así que déjame mostrarte eso
con otra cadena aquí.
Así que si digo Jonas,
y luego lo mismo,
verias que agregaria mucho mas
de los signos más
porque la cadena inicial es más corta.
Así te ves,
ahora tenemos muchas más ventajas
pero al final
la cadena también es un 25
o en realidad 23
así que error aquí.
Así que ahora la cuerda también tiene 25 de largo.
Y entonces vemos aquí en este
tiene exactamente la misma longitud
como este de aquí en la consola, ¿vale?
Luego también está la almohadilla ENT.
Y ahora podemos tomar el resultado de esto,
e inmediatamente también rellenar el final de la cuerda.
Así que el final de la almohadilla
y ahora hagámoslo más largo
y luego otra vez el signo más.
Entonces esto básicamente agregará
10 puntos a favor hasta el final de la cadena
porque el resultado de esta cadena aquí
ya tiene 25 caracteres, ¿verdad?
Y así en este
luego lo acariciamos todo el camino
hasta la longitud de 35 con algunas ventajas más,
y entonces vamos a agregar 10 de ellos.
Hagamos un 30,
para que podamos ver fácilmente que,
y así, de hecho, ahora agregó cinco de ellos aquí.
Y sólo por el bien de la terminación
hagamos lo mismo aquí con mi nombre
y esta aquí recién a las 20
para que quede un poco mas parejo
¿está bien?
Pero ahora vamos a usar un más
ejemplo del mundo real de relleno aquí.
Entonces, cuando vea un número de tarjeta de crédito en Internet,
nunca ves el número completo, ¿verdad?
Por lo general, vemos los últimos cuatro dígitos
y el resto se enmascara con algún símbolo.
Así que vamos a implementar una función que
en realidad hace ese enmascaramiento.
Así que esto va a ser muy interesante.
Esta es una gran aplicación de métodos de cadena.
Así que enmascare la función de las tarjetas de crédito.
Entonces vamos a recibir un número, ¿de acuerdo?
Así que un número real
y comencemos convirtiendo este número en una cadena.
tan cuerda,
ahora aprendimos cómo convertir un número en una cadena
en la sección fundamental, ¿no?
Entonces eso fue así, ¿recuerdas?
Sin embargo, hay un buen truco.
que en realidad hace que esto sea más fácil para nosotros.
Así que podemos tomar el número
y luego agregamos una cadena vacía.
Y así el resultado de esto
sera el numero
pero como una cadena.
y esto funciona
porque como espero que recuerdes
cuando uno de los operandos del signo más es una cadena
convertirá todos los operandos en una cadena.
Y entonces este número se convertirá en una cadena
más la cadena vacía
y entonces va a quedar exactamente igual, está bien.
Así que para saber qué debemos hacer aquí
vamos una vez más
primero llama a la función
antes de que lo escribamos
para que sepamos qué tipo de entrada obtenemos.
Así que enmascare la tarjeta de crédito
y digamos, ahora el numero es este
y solo estoy poniendo algo al azar aquí.
Pero, por supuesto, también funcionará con cadenas.
y no importa cuánto tiempo sea, ¿de acuerdo?
Entonces, como estaba diciendo,
generalmente en internet
solo podemos ver estos últimos cuatro dígitos
y el resto está enmascarado por algún símbolo.
Entonces, ¿qué tenemos que hacer aquí?
es básicamente sacar estos cuatro números
y luego usa padstart
para crear una cadena con la misma longitud
como este número inicial aquí
pero con algún tipo de símbolo allí.
Así que déjame escribir eso en código,
y luego espero que quede claro.
Así que vamos a tomar los últimos cuatro caracteres de la cadena.
Entonces, usamos slice
con un parámetro negativo nuevamente de menos cuatro.
Y ahora aquí está lo que vamos a devolver,
volveremos un último.
Esos son solo estos cuatro personajes.
Y luego lo rellenaremos al principio.
todo el camino hasta la longitud original de la cadena.
Entonces cadena.longitud
y el personaje que vamos a usar será esta estrella, ¿de acuerdo?
Y así desde que devolvimos algo
para hacer esta función un poco más real
ahora necesitamos bloquear el resultado en la consola
y para empezar vamos a hacer
una versión un poco más simple
para que veamos que realmente funcionó.
Así que un número más corto aquí
con sólo ocho dígitos.
Y así el final debería ser 7836
y luego comenzando con cuatro estrellas.
Así que vamos a ver,
y sí, eso funcionó muy bien,
¿bien?
Así que de nuevo, tomamos los últimos cuatro aquí
y luego rellenamos el resto de la cuerda
hasta que coincida con la longitud original de la cadena
que era ocho y por lo tanto se añadieron cuatro estrellas.
Y lo mismo aquí ya lo mismo aquí.
Impresionante.
Esa es una aplicación realmente fantástica.
de este método, creo.
Y ahora para terminar el último método simple que quiero
mostrarle es el método de repetición.
así que repite
y como dice el nombre
este simplemente nos permite repetir
la misma cadena varias veces.
Así que digamos que hay mal tiempo en el aeropuerto de Wen.
Así que cuando eso sucede
suelen tener esos mensajes largos en la pantalla,
como con los textos repitiendo
que luego sigue ejecutándose y repitiéndose todo el tiempo.
Así que llamemos a este mensaje.
Así que llamémoslo mensaje dos
ya tenemos un mensaje ahí arriba.
Así que digamos mal tiempo
todas las salidas
retrasado, ¿de acuerdo?
Y ahora queremos
básicamente crear una cadena más grande
repitiendo este aquí varias veces.
Así que eso es bastante fácil.
Solo tomamos esta cadena
repetición de llamada,
así que repite
y luego el número de veces que queremos repetirlo,
digamos cinco
y ahí está
Así que todo esto es la misma cadena larga
y solo debemos agregar un espacio aquí al final.
Y así verás
ahora puedes verlo aún mejor.
Que todo es solo una gran cadena
con el mismo mensaje repitiéndose una y otra vez.
O también podemos simular
que por el mal tiempo
ahora hay muchos aviones esperando en fila para despegar.
Así que vamos a crear una función divertida para eso.
Así que aviones en línea
y aquí el número de aviones.
Entonces consola.log
hay N planos en línea.
Y luego aquí podemos mostrar que
gráficamente usando un emoji como este,
digamos claro,
Voy a usar este.
Y entonces esto aquí de hecho cuenta como una cadena.
Así que vamos a crear una cadena con eso
y luego repetirlo.
Y lo repetiremos tantas veces
ya que hay aviones esperando.
Así que aviones en línea
aquí tenemos cinco esperando,
entonces hagámoslo en otro aeropuerto
donde solo hay tres aviones esperando
y luego 12
De hecho, ahora tenemos cinco aviones aquí, tres
y aquí, 12 aviones, ¿de acuerdo?
Está bien, genial.
Ahora no hablamos de
todos estos métodos de cadena que existen
pero si quieres echarles un vistazo,
puedes hacerlo en MDN.
Y lo que me gusta hacer es simplemente buscar
para uno de los métodos,
digamos, reemplazo de cadena
y luego eso me llevará a esa página de reemplazar
porque entonces en el lado izquierdo,
al menos cuando la ventana es un poco más grande.
Entonces aquí podemos ver todo
de los diferentes métodos de cadenas que podemos utilizar.
Así que usamos split, slice, repeat, padstart, pad end.
Pero como puedes ver, hay aún más aquí.
pero en realidad hablamos de todos los más importantes.
Tal vez uno que puedas revisar es
vamos a ver
concat tal vez
o debería llamarse uno al revés.
Bueno, en realidad no está aquí,
pero en fin, como ves hablamos de
la mayoría de los métodos de cadena más importantes aquí.
Así que espero que te hayas divertido con esto.
y te veo en el proximo video
donde entonces tenemos un desafío
donde puedes usar todos
este conocimiento que acabas de adquirir aquí
en los últimos tres videos.