En el artículo de hoy vamos a seguir viendo cómo se puede seguir utilizando el objeto Intl para dar formatos atendiendo a un modelo i18n. En este caso vamos a ver cómo formatear listas en Javascript. En concreto vamos a utilizar el objeto Intl.ListFormat.
Pero qué es eso de la internacionalización del formato de las listas en Javascript. La idea es que nos permita convertir a un formato texto una lista de elementos. De esta forma si tenemos una lista de elementos nos los presente de la siguientes formas
elemento1, elemento2 y elemento3 //si es una lista conjuntiva
elemento1, elemento2 o elemento3 // si es una lista disyuntiva
elemento1 elemento2 elemento3 //si es una enumeración de elementos
Además la gracia es que me lo haga atendiendo al idioma, por lo que esto mismo en inglés sería
elemento1, elemento2 and elemento3 //si es una lista conjuntiva
elemento1, elemento2 or elemento3 // si es una lista disyuntiva
elemento1 elemento2 elemento3 //si es una enumeración de elementos
Pongámonos manos a la obra para poder ejecutarlo. Lo primero de todo será el tener la lista de elementos. En este caso vamos a tener una lista de ciudades, para ello declaramos la siguiente constante:
const ciudades = ['Avila','Salamanca','Segovia'];
Ahora vamos a instanciar el objeto Intl.ListFormat. Al igual que el resto de objetos de tipo Intl tiene dos parámetros. El primero corresponde al locale en un formato etiqueta representada por un código BCP 47 . Por lo que tendremos una etiqueta con 2 o 4 caracteres si aplicamos el país del estilo es-ES, en-US, ar-EG,… o es, en, ar,…
Y el segundo parámetro serán las opciones, en formato JSON, que le queremos dar a la lista. En este caso manejamos dos valores:
- style, cuyos valores son «long», «short» o «narrow» y corresponde a lo largo o corto que queramos el texto.
- type, nos permite indicar de que tipo es la lista. Como vimos en el ejemplo si es «conjuction», «disjunction» o «unit».
Así, si queremos una lista donde sea de tipo larga y que sea una lista conjuntiva invocaremos al constructor del objeto Intl.ListFormat de la siguiente manera.
const formatter = new Intl.ListFormat('es', { style: 'long', type: 'conjunction' });
Solo nos quedará el llamar al método .format() para poder dar formato a la lista de valores. Es por ello que pasamos el valor de la lista a dicho método.
console.log(formatter.format(ciudades)); // Ávila, Salamanca y Segovia
Veamos como quedaría el código completo con diferentes maneras de formatear listas en Javascript.
const ciudades = ['Avila','Salamanca','Segovia'];
const formatter = new Intl.ListFormat('es', { style: 'long', type: 'conjunction' });
console.log(formatter.format(ciudades));
const formatter2 = new Intl.ListFormat('es', { style: 'long', type: 'disjunction' });
console.log(formatter2.format(ciudades));
const formatter3 = new Intl.ListFormat('es', { style: 'narrow', type: 'unit' });
console.log(formatter3.format(ciudades));
Espero que este nuevo artículo sobre formatos internacionales en Javascript os sea de utilidad.
