M

MLOG

Español

Llega a un público global con la API Intl de JavaScript. Aprende las mejores prácticas de internacionalización para dar formato a fechas, números, divisas y más, asegurando una experiencia de usuario perfecta en todo el mundo.

API Intl de JavaScript: Mejores Prácticas de Internacionalización para una Audiencia Global

En el mundo interconectado de hoy, crear aplicaciones web que se adapten a una audiencia global es crucial. La API Intl de JavaScript proporciona herramientas poderosas para la internacionalización (i18n), lo que le permite formatear fechas, números, divisas y más de acuerdo con las convenciones de diferentes idiomas. Este artículo explora las mejores prácticas para aprovechar la API Intl para construir aplicaciones verdaderamente globales.

Comprendiendo la Internacionalización (i18n) y la Localización (l10n)

Antes de profundizar en los detalles de la API Intl, es importante comprender la distinción entre internacionalización (i18n) y localización (l10n). I18n es el proceso de diseñar y desarrollar aplicaciones de manera que puedan adaptarse fácilmente a diferentes idiomas y regiones sin requerir cambios de ingeniería. L10n, por otro lado, es el proceso de adaptar una aplicación internacionalizada para un idioma específico traduciendo texto y personalizando otros elementos específicos del idioma.

La API Intl se centra en el aspecto i18n, proporcionando los mecanismos para manejar datos sensibles al idioma, mientras que la localización generalmente implica proporcionar traducciones y configuraciones específicas del idioma.

Componentes clave de la API Intl

La API Intl consta de varios objetos clave, cada uno responsable de manejar aspectos específicos de la internacionalización:

Mejores prácticas para usar la API Intl

Para utilizar eficazmente la API Intl y garantizar una experiencia de usuario positiva para su audiencia global, considere las siguientes mejores prácticas:

1. Especifique el idioma correcto

La base de la internacionalización es especificar el idioma correcto. El idioma identifica el idioma, la región y cualquier variante específica que se utilizará para el formato. Puede obtener el idioma preferido del usuario de la propiedad navigator.language o del encabezado HTTP Accept-Language.

Al crear objetos Intl, puede especificar el idioma como una cadena o una matriz de cadenas. Si proporciona una matriz, la API intentará encontrar el idioma que mejor coincida de las opciones disponibles.

Ejemplo:

const locale = navigator.language || 'es-ES';
const numberFormat = new Intl.NumberFormat(locale);

Si el idioma preferido del usuario no está disponible, puede proporcionar un idioma de respaldo. Por ejemplo, podría usar 'es-ES' como predeterminado si el navegador del usuario informa un idioma no compatible.

2. Aproveche Intl.DateTimeFormat para el formato de fecha y hora

Formatear correctamente las fechas y horas es crucial para proporcionar una experiencia localizada. El objeto Intl.DateTimeFormat le permite formatear fechas y horas de acuerdo con las convenciones de un idioma específico.

Puede personalizar el formato especificando varias opciones, como el año, mes, día, hora, minuto y formato de segundo. También puede especificar la zona horaria para garantizar que las fechas y horas se muestren correctamente para los usuarios en diferentes partes del mundo.

Ejemplo:

const locale = 'de-DE'; // Alemán (Alemania)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Output: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

Este ejemplo formatea la fecha y hora actuales de acuerdo con el idioma alemán (Alemania), incluyendo el año, el mes, el día, la hora y el minuto. También especifica la zona horaria 'Europe/Berlin'.

Recuerde considerar diferentes formatos de fecha y hora utilizados en todo el mundo. Por ejemplo, Estados Unidos usa MM/DD/YYYY, mientras que muchos otros países usan DD/MM/YYYY.

3. Use Intl.NumberFormat para el formato de número, moneda y porcentaje

El objeto Intl.NumberFormat proporciona una forma flexible de formatear números, divisas y porcentajes de acuerdo con las convenciones específicas del idioma. Puede personalizar el formato especificando opciones como la moneda, el estilo (decimal, moneda o porcentaje), los dígitos fraccionarios mínimos y máximos, y más.

Ejemplo (Formato de moneda):

const locale = 'ja-JP'; // Japonés (Japón)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Output: z.B. "￥12,346"
console.log(formattedAmount);

Este ejemplo formatea el número 12345.67 como yen japonés (JPY). Observe cómo el símbolo de la moneda (￥) y el separador de agrupación (,) se ajustan automáticamente de acuerdo con el idioma japonés.

Ejemplo (Formato de porcentaje):

const locale = 'ar-EG'; // Árabe (Egipto)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Output: z.B. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Este ejemplo formatea el número 0.75 como un porcentaje en árabe (Egipto). La salida incluye el signo de porcentaje árabe (٪) y dos decimales.

Consideraciones importantes para el formato de moneda:

4. Manejar la pluralización correctamente con Intl.PluralRules

Las reglas de pluralización varían significativamente entre los idiomas. Por ejemplo, el inglés tiene reglas simples con formas singulares y plurales, mientras que otros idiomas tienen reglas más complejas basadas en el valor del número. El objeto Intl.PluralRules le ayuda a determinar la forma plural correcta para un número y un idioma dados.

Ejemplo:

const locale = 'ru-RU'; // Ruso (Rusia)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (singular)
    case 'few': return 'товара'; // tovara (few)
    case 'many': return 'товаров'; // tovarov (many)
    default: return 'товаров'; // Default to many
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Output: "5 товаров"

Este ejemplo demuestra cómo usar Intl.PluralRules para obtener la forma plural correcta para la palabra "товар" (artículo) en ruso. El ruso tiene diferentes formas plurales dependiendo de si el número termina en 1, 2-4 o 5-9.

5. Formatear listas con Intl.ListFormat

Al presentar listas de elementos, el formato puede variar según el idioma. El objeto Intl.ListFormat le permite formatear listas de acuerdo con las convenciones específicas del idioma, incluido el uso de diferentes conjunciones (por ejemplo, "y", "o") y separadores de lista (por ejemplo, comas, puntos y comas).

Ejemplo:

const locale = 'es-ES'; // Español (España)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Output: "manzanas, naranjas y plátanos"
console.log(formattedList);

Este ejemplo formatea una lista de frutas en español (España), utilizando la conjunción "y" para conectar los dos últimos elementos.

6. Formatear tiempos relativos con Intl.RelativeTimeFormat

Mostrar tiempos relativos (por ejemplo, "ayer", "en 2 horas") proporciona una forma fácil de usar para presentar información de tiempo. El objeto Intl.RelativeTimeFormat le permite formatear tiempos relativos de acuerdo con las convenciones específicas del idioma.

Ejemplo:

const locale = 'fr-CA'; // Francés (Canadá)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Output: "hier"
console.log(rtf.format(2, 'day')); // Output: "dans 2 jours"

Este ejemplo formatea tiempos relativos en francés (Canadá). La salida muestra "hier" (ayer) y "dans 2 jours" (en 2 días).

La opción `numeric` controla cómo se muestran los números. `'auto'` muestra palabras relativas cuando están disponibles (como "ayer") y números en caso contrario. `'always'` siempre muestra números.

7. Cotejar cadenas con Intl.Collator

La comparación de cadenas es sensible al idioma. La forma en que se ordenan las cadenas varía según el idioma. Por ejemplo, en alemán, el carácter "ä" generalmente se ordena como "a", mientras que en sueco, se ordena después de "z". El objeto Intl.Collator le permite comparar cadenas de acuerdo con las reglas de un idioma específico.

Ejemplo:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Output: ["äpfel", "aprikosen", "bananen", "birnen"]

Este ejemplo ordena una matriz de palabras alemanas utilizando Intl.Collator. Observe que "äpfel" se ordena antes que "aprikosen", a pesar de que "ä" aparece más tarde en el alfabeto.

8. Manejar casos extremos y datos faltantes

No todos los idiomas son compatibles con todos los navegadores o entornos. Es esencial manejar los casos extremos donde un idioma no está disponible o cuando faltan datos. Considere las siguientes estrategias:

9. Pruebe a fondo con diferentes idiomas

Las pruebas exhaustivas son cruciales para garantizar que su aplicación internacionalizada funcione correctamente para todos los idiomas admitidos. Pruebe su aplicación con una variedad de idiomas, incluidos los idiomas que usan diferentes conjuntos de caracteres, formatos de fecha y hora, formatos de números y reglas de pluralización.

Considere el uso de herramientas de prueba automatizadas para verificar que su aplicación se comporte como se espera en diferentes idiomas.

10. Considere las implicaciones de rendimiento

Si bien la API Intl es generalmente eficiente, la creación de objetos Intl puede ser relativamente costosa. Para optimizar el rendimiento, considere lo siguiente:

Más allá de la API Intl: Consideraciones adicionales para la internacionalización

Si bien la API Intl proporciona herramientas poderosas para el formato de datos, la internacionalización implica más que solo el formato. Considere los siguientes aspectos adicionales:

Conclusión

La API Intl de JavaScript es una herramienta invaluable para crear aplicaciones web que se adaptan a una audiencia global. Al seguir las mejores prácticas descritas en este artículo, puede crear aplicaciones que no solo sean funcionales, sino también culturalmente sensibles y fáciles de usar para usuarios de todo el mundo. Aproveche el poder de la API Intl y libere el potencial de su aplicación en el escenario global. Dominar la API Intl resultará en una experiencia más inclusiva y accesible para todos sus usuarios, independientemente de su ubicación o idioma.