Aprenda a trabajar con la internacionalización en JavaScript
Intl
es un objeto poderoso que expone la API de internacionalización de JavaScript .
Expone las siguientes propiedades:
Intl.Collator
: le da acceso a la comparación de cadenas sensible al idiomaIntl.DateTimeFormat
: le brinda acceso a formatos de fecha y hora sensibles al idiomaIntl.NumberFormat
: le da acceso a formato de números sensible al idiomaIntl.PluralRules
: le brinda acceso a formato plural sensible al idioma y reglas de idioma pluralIntl.RelativeTimeFormat
: le da acceso a formato de tiempo relativo sensible al idioma
También proporciona un método: Intl.getCanonicalLocales()
.
Intl.getCanonicalLocales()
Permite comprobar si una configuración regional es válida y devuelve el formato correcto. Puede aceptar una cadena o una matriz:
Intl.getCanonicalLocales('it-it') //[ 'it-IT' ]Intl.getCanonicalLocales(['en-us', 'en-gb']) //[ 'en-US', 'en-GB' ]
y genera un error si la configuración regional no es válida
Intl.getCanonicalLocales('it_it') //RangeError: Invalid language tag: it_it
que puedes atrapar con un bloqueo try/catch.
Diferentes tipos pueden interactuar con la API internacional para satisfacer sus necesidades específicas. En particular, podemos mencionar:
String.prototype.localeCompare()
Number.prototype.toLocaleString()
Date.prototype.toLocaleString()
Date.prototype.toLocaleDateString()
Date.prototype.toLocaleTimeString()
Veamos cómo trabajar con las propiedades Intl anteriores:
Compilador internacional
Esta propiedad le da acceso a la comparación de cadenas sensible al idioma.
Inicializas un objeto Collator usando new Intl.Collator()
, le pasas una configuración regional y usas su compare()
método que devuelve un valor positivo si el primer argumento viene después del segundo. Un valor negativo si es lo contrario y cero si es el mismo valor:
const collator = new Intl.Collator('it-IT')collator.compare('a', 'c') //a negative valuecollator.compare('c', 'b') //a positive value
Podemos usarlo para ordenar matrices de caracteres, por ejemplo.
Formato de fecha y hora internacional
Esta propiedad le da acceso a formato de fecha y hora sensible al idioma.
Inicializa un objeto DateTimeFormat usando new Intl.DateTimeFormat()
, pasándole una configuración regional y luego le pasa una fecha para formatearlo como prefiera esa configuración regional:
const date = new Date()let dateTimeFormatter = new Intl.DateTimeFormat('it-IT')dateTimeFormatter.format(date) //27/1/2019dateTimeFormatter = new Intl.DateTimeFormat('en-GB')dateTimeFormatter.format(date) //27/01/2019dateTimeFormatter = new Intl.DateTimeFormat('en-US')dateTimeFormatter.format(date) //1/27/2019
El método formatToParts() devuelve una matriz con todas las partes de la fecha:
const date = new Date()const dateTimeFormatter = new Intl.DateTimeFormat('en-US')dateTimeFormatter.formatToParts(date)/*[ { type: 'month', value: '1' }, { type: 'literal', value: '/' }, { type: 'day', value: '27' }, { type: 'literal', value: '/' }, { type: 'year', value: '2019' } ]*/
También puedes imprimir la hora. Consulta todas las opciones que puedes utilizar en MDN . Fotos Porno y actrices porno
Formato de número internacional
Esta propiedad le brinda acceso al formato de números que se adapta al idioma. Puede usarla para dar formato a un número como valor monetario.
Digamos que tienes un número como 10
, y representa el precio de algo.
Quieres transformarlo a $10,00
.
Sin embargo, si el número tiene más de 3 dígitos, debe mostrarse de forma diferente, por ejemplo, 1000
debe mostrarse como$1.000,00
Sin embargo, esto está en dólares estadounidenses.
Distintos países tienen diferentes convenciones para mostrar valores .
JavaScript nos lo pone muy fácil con la API de internacionalización de ECMAScript , una API de navegador relativamente reciente que proporciona muchas funciones de internacionalización, como formato de fechas y horas.
Está muy bien soportado:
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2})formatter.format(1000) // "$1,000.00"formatter.format(10) // "$10.00"formatter.format(123233000) // "$123,233,000.00"
La minimumFractionDigits
propiedad establece que la parte fraccionaria siempre tenga al menos 2 dígitos. Puede consultar qué otros parámetros puede utilizar en la página NumberFormat de MDN .
Este ejemplo crea un formateador de números para la moneda euro, para el país italiano:
const formatter = new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR'})
Reglas Plurales Internacionales
Esta propiedad le brinda acceso a reglas de plural y formato de plural que se adaptan al idioma. Encontré el ejemplo de Mathias Bynens en el portal de desarrolladores de Google, el único que pude relacionar con el uso práctico: dar un sufijo a los números ordenados: 0, 1, 2, 3, 4, 5…
const pr = new Intl.PluralRules('en-US', { type: 'ordinal'})pr.select(0) //otherpr.select(1) //onepr.select(2) //twopr.select(3) //fewpr.select(4) //otherpr.select(10) //otherpr.select(22) //two
Cada vez que tenemos other
, lo traducimos a th
. Si tenemos one
, usamos st
. Porque two
usamos nd
. few
obtiene rd
.
Podemos utilizar un objeto para crear una matriz asociativa:
const suffixes = { 'one': 'st', 'two': 'nd', 'few': 'rd', 'other': 'th'}
y realizamos una función de formato para referenciar el valor en el objeto, y devolvemos una cadena que contiene el número original y su sufijo:
const format = (number) = `${number}${suffixes[pr.select(number)]}`
Ahora podemos usarlo así:
format(0) //0thformat(1) //1stformat(2) //2ndformat(3) //3rdformat(4) //4thformat(21) //21stformat(22) //22nd
Tenga en cuenta que pronto llegarán novedades interesantes a Intl, como Intl.RelativeTimeFormat
y Intl.ListFormat
, que al momento de escribir este artículo solo están disponibles en Chrome y Opera.
Tips para principiantes de JavaScript
Tal vez te puede interesar:
- Cómo generar un número aleatorio entre dos números en JavaScript
- Cómo esperar el evento DOM listo en JavaScript simple
- Cómo determinar si una fecha es hoy en JavaScript
- Cómo contar el número de propiedades en un objeto JavaScript
Internacionalización de JavaScript
Compilador internacionalFormato de fecha y hora internacionalFormato de número internacionalReglas Plurales Internacionales
programar
es
https://aprendeprogramando.es/static/images/programar-internacionalizacion-de-javascript-2015-0.jpg
2024-10-31
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente