Esto de aquí, que es súper interesante.
La verdad es que no es una cosa que sea nueva de JavaScript.
¿Sabes? No es una cosa que acaba de salir ni...
El momento ideal para plantar un árbol es durante la estación de lluvias
en las zonas tropicales y tropicales.
Bueno, ya sabéis que es un dicho.
Es un dicho.
¡Es un dicho!
¿Cómo os ponéis?
Ahí está.
Vamos a ver.
No sé si sabéis el tema este del...
Yo sabéis que soy un gran fan del Intel,
que es un objeto que hay en JavaScript.
No sé si aquí estará, pero lo vamos a intentar.
Bueno, normalmente, por ejemplo, vamos a poner const gente del chat.
Y vamos a poner a Bárbara.
Vamos a poner Madeval.
Vamos a poner Pedro Guzmán.
¿Qué más?
Vamos a poner a Feral.
A Feral también lo ponemos.
A juguete.
Venga, ya, ya está, ya está.
Ya está, que no necesitamos a tantos.
Cosa Corión, venga.
Ya está.
Venga.
O sea, una de las formas muy típicas de...
Claro, tú tienes un array y dices, vale, pues quiero listarlos y ponerlos en un string.
Lo que sueles poner normalmente es gente del chat, del chat, punto, join y coma.
¿No?
Haces una cosa así y ya lo tienes listado por comas y tal.
Pero no está bien del todo.
No está bien del todo.
Porque es verdad que el último, si te fijas el último, debería ser y Cosa Corión, ¿no?
O sea, en realidad lo que tendrías que hacer sería más bien, sería más complicado que esto.
O sea, vamos a ver si somos capaces.
Tendríamos que poner slice 0 menos 1, ¿no?
No, slice.
Ah, punto slice, perdón.
0 menos 1.
Vale.
Con esto ahora no tendríamos a Cosa Corión.
Ahora tendríamos que hacer un concat.
Concat.
Bueno, o podríamos hacer un más.
Bueno, vamos a hacer un concat.
Join, concat.
Y aquí gente del chat slice menos 1.
Ay, esto lo he puesto mal.
Menos 1, missing semicolon.
Espera, ¿cómo come missing semicolon?
Vale.
Gente del chat slice menos 1.
Y podríamos hacer aquí algo así, ¿no?
Podríamos hacer esto.
A ver, hay un montón de formas de hacerlo y ya está.
Pero, bueno, gente, para hacerlo bien tendríamos que hacer todo esto.
Pero hay bastantes problemas con esta solución.
El primer problema es que, obviamente, esto solo funciona en nuestro idioma, ¿no?
Porque si fuese en inglés, pues tendríamos que cambiar esto.
Entonces, el conector, podríamos decir, lang, si es en, pues, si lang es en, entonces tendría que ser and.
Si no, tendría que ser i, por ejemplo.
Y el conector lo utilizaríamos aquí.
Y, bueno, tendríamos and.
Y cuando cambio a español, pues tendríamos una i.
Esto es bastante pirata.
Venga, vamos a poner a tab Vito, que ha hecho un montón de PRs en Codilink, ¿vale?
Entonces, esto es bastante pirata porque no lo estamos haciendo bien.
No estaríamos haciendo bien las traducciones.
Las estaríamos de forma muy imperativa poniéndolas a mano.
Esto no escala bien.
Esto es un rollo.
Esto es un rollo.
Ahora, desde hace tiempo, de hecho, lo podemos ver en Can I Used y podemos buscar List Format,
tenemos el Intel List Format, que además tiene un soporte bastante grande, ¿eh?
Tiene un soporte del 90%.
Es verdad que en Safari, no me acuerdo que tenía, pero sí, en Safari solo está disponible
a partir de Big Sur, de la versión 11.
O sea, que el Safari 14.1, si está utilizando un sistema operativo que no es el último,
no tiene soporte.
Es un poco raro, pero bueno, por suerte Safari no es el más usado.
Pero sí que tiene soporte, solo que en el último sistema operativo, ¿no?
¿En cuál estamos ahora?
Ah, no me acuerdo si estamos en Big Sur.
Creo que sí, que estamos en Big Sur.
Bueno, total, que el 90% sí que lo tienen.
Lo que sería lo ideal es que utilices un Polyfill.
Si necesitas soporte de Internet Explorer o de alguna versión antigua de Safari en iOS o algo así.
Ah, estamos en Monterrey.
Gracias.
Pues es el penúltimo Big Sur, ¿no?
Vale.
El tema, si necesitas soporte, pues en List Format, pues instala un Polyfill.
¿Qué es esto de List Format?
¿Para qué sirve esto de List Format?
Vamos.
Pues hay un objeto que...
Onda, no está aquí.
No está aquí.
List Format...
Nah, aquí está.
Vale.
Hay un objeto en JavaScript desde hace bastantes versiones que es brutal y que tienes que dominar sí o sí.
Porque es que es súper necesario que es Intel.
Que Intel viene de internacionalización.
¿Vale?
Internacionalización.
O I18N, como le quieras llamar.
Pero bueno, internacionalización sería lo más correcto.
Y esto lo que te permite es que tiene un montón de métodos, un montón, un montón de métodos que te permite hacer traducciones, tanto de fechas, de precios, de tiempos relativos, de... yo qué sé.
Creo que también del propio idioma, también, ¿sabes? El Display Names este, por ejemplo, lo que te da es información del idioma, del país, de la región, de un montón de cosas, de un montón de cosas.
Y una de ellas es el List Format, que muy poca gente lo conoce y es brutal.
¿Qué es lo que hace este List Format?
Bueno, este List Format lo que te permite es que el problema que estamos teniendo aquí, esta cosa horrible, lo que puedes hacer es Intel y le pones directamente...
Bueno, tenemos que poner New Intel, List Format y aquí le tendríamos que poner el idioma y entonces podríamos utilizar el format y decirle cuál es el array que queremos formatear.
En este caso, la gente del chat.
Y aquí podríamos ver que ya directamente con solo una línea de código ya nos lo ha hecho correctamente en castellano.
Nos ha puesto aquí el i, datvito, ¿vale? Y ya está.
O sea, esto es todo lo que necesitas.
Ahora, ¿qué lo tienes que traducir en inglés? Pues nada, le pones en y vas a ver que aquí tienes.
Además, lo hace bien porque aquí antes lo hemos hecho mal porque en inglés, esto es una cosa que es diferente al castellano o al español,
es el hecho de que en el último hay que ponerle una coma.
¿Ves que en castellano no lo tiene? Bueno, en español no lo ponemos.
En inglés sí que lo ponemos, ¿vale? La última hay que ponerle una comita.
Ah, y no se ve. Perdonad. Perdonad que estoy encima. Perdonad, perdonad. Ya está arreglado. Ya está.
Vale, pues lo tenemos aquí. ¿Veis que en el último tiene una coma?
Esto es una cosa que normalmente no se tiene en cuenta, pero ¿por qué en MDN colocan prototype en el título de varios métodos?
Porque está en el prototype. O sea, porque lo que te está intentando hacer es que sepas que es parte del prototype.
Por ejemplo, en este caso, no sé cuál. No sé cuál es el que dices que... Es que no sé si...
Mira, este, por ejemplo. Esto es porque el format está en el prototype del list format.
Entonces, esto es un método que está en el prototype. O sea, ya lo tienes disponible cuando hagas una instancia del list format.
Lo mismo pasa con el array. Si lo buscamos en array, array for each MDN, pues debería salir en el prototype.
¿Ves? Array.prototype.for each. O sea que de todo sentido del mundo.
Vale, pues como podéis ver, en list format tenéis esto. Luego, hay un montón de...
Esto no acaba aquí porque, claro, hay gente que dice, ah, bueno, esto está bien, pero no, no, no está bien.
Tú no has visto aquí nada. No has visto todavía nada. El tema es que, además, en el list format le puedes pasar un segundo parámetro aquí con las opciones.
Y hasta ahora solo hemos visto como listar, ¿sabes? Como listar con el i.
Pero tú aquí lo que le puedes poner... Ay, ¿dónde tengo el foco?
Aquí le puedes decir type. Y le puedes poner que es disjunción, creo.
¿Vale? Y fíjate lo que ha salido aquí. Una o.
Le puedes decir si es una conjunción, una... O sea, si es una o, un i o una o.
¿Vale? Una conjunción o una disjunción.
¿Disjunción? ¿Dijunción? ¿Cómo se llama disjunción en castellano? ¿Cómo es disjunción?
Disjunción. Vale, perfecto. Pues una disjunción. Y esto lo que te permite es ponerle una o.
¿Que parece una chorrada? Sí, pero es que a la hora de listar la posibilidad de dar opciones,
fíjate lo sencillo que es decir. Si es una disyuntiva. No, una disyuntiva no.
Disyuntiva está relacionado, pero no sería exactamente esto.
Una conjunción o una disyunción. ¿Vale? No disyunción.
Disjunción. Ponlo en chino. Bueno, pues en chino igual. En chino tendrías lo mismo, al final.
Tendrías exactamente lo mismo. Y te pone todos los símbolos correctos.
¿Veis que aquí nos ha puesto una coma rara? Y además aquí nos ha puesto como este símbolo.
Pues esto es lo mismo. Y en japonés, pues igual.
Esto es lo... Bueno, en este caso... A ver.
Japonés no ha puesto aquí una i. Ah, porque no es así. ¿Cómo es japonés? ¿Cómo es japonés?
Esto es chino. ¿Y japonés no era jp? ¿Es j? Sí, es j. Ja. Ja. Ja.
No, jp. Pensad que era jp. Bueno, pues qué tenéis esto, ¿no?
Y esto lo que te permite es hacer una lista no solo de cosas que sean i, i, i,
sino que puede ser también o. Y también tendrías de... Si lo quieres listar como unidades, ¿no?
Por ejemplo, creo que hay units o units. Es unit. ¿Vale? Solo si lo quieres listar y componer un espacio.
¿Sabes? Bárbara, no sé qué, no sé cuánto. En lugar de utilizarlo como una frase.
O sea, que tendrías un montón. Ponlo en peruano. ¿Y en peruano cómo sería?
Es súper útil. Os recomiendo un montón que siempre que tengáis que hacer cualquiera de estas cosas,
que le echéis un vistazo.