Internacionalización de JavaScript

 

 

 

Internacionalizacion de javascript 1

Aprenda a trabajar con la internacionalización en JavaScript

 

Intles 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 idioma
  • Intl.DateTimeFormat: le brinda acceso a formatos de fecha y hora sensibles al idioma
  • Intl.NumberFormat: le da acceso a formato de números sensible al idioma
  • Intl.PluralRules: le brinda acceso a formato plural sensible al idioma y reglas de idioma plural
  • Intl.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, 1000debe 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 minimumFractionDigitspropiedad 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 twousamos nd. fewobtiene 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.RelativeTimeFormaty 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:

  1. Cómo generar un número aleatorio entre dos números en JavaScript
  2. Cómo esperar el evento DOM listo en JavaScript simple
  3. Cómo determinar si una fecha es hoy en JavaScript
  4. 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

 

Internacionalizacion de javascript 1
Internacionalizacion de javascript 1

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

 

 

Update cookies preferences