Guía autorizada para el navegador Internacionalización local – Magazine Smash

La idea errónea general es que la internacionalización (I18n) se trata simplemente de traducir textos. Aunque crucial, la traducción es solo un aspecto. Una de las complejidades radica en Información que se adapta a varias expectativas culturales: ¿Cómo muestras tu cita con Alemania en Japón? ¿Cuál es la forma correcta de hacer proyectos relacionados con el inglés en árabe? ¿Cómo se clasifica una lista de nombres para varios idiomas?

Muchos desarrolladores confían en bibliotecas de terceros para levantar pesas o, peor, características de formato personalizadas para abordar estos desafíos. Si bien funcionan, estas soluciones a menudo vienen con una sobrecarga significativa: mayor tamaño del paquete, posibles cuellos de botella de rendimiento y esfuerzos constantes para mantener el ritmo de las reglas de lenguaje en evolución y los datos del área del idioma.

ingresar API de internacionalización de ECMAScriptmás común Intl Objetivo. Este poder silencioso se construye directamente en un entorno de JavaScript moderno y es un estimado pero increíble Soluciones efectivas, locales, de rendimiento y estándares que cumplen con Utilizado para procesar la internacionalización de datos. Esto demuestra el compromiso de la red para convertirse mundialDependiendo de la región específica, se proporciona una forma unificada y efectiva a los números de formato, fechas, listas, etc.

Intl y local: no solo código de idioma

centro Intl Es un concepto Lugar. Locale es más que solo dos letras de código de idioma (p. Ej. en Para inglés o es en español). Encapsula el contexto completo necesario para informar adecuadamente un grupo cultural particular. Esto incluye:

• idioma: El medio de idioma principal (p. Ej. en,,,,, es,,,,, fr).
• guion: Scripts (p. Latn Para latín, Cyrl para Cyril). Por ejemplo, zh-Hans Para chino simplificado, vs. zh-Hant Utilizado en chino tradicional.
• área: Área geográfica (p. Ej. US Para los Estados Unidos, GB Para el Reino Unido, DE para Alemania). Esto es crucial para la mutación en el mismo idioma, p. en-US Vs. en-GBfecha, hora y formato de número son diferentes.
• Preferencias/Variaciones: Más preferencias culturales o lingüísticas específicas. mirar «Seleccione la etiqueta de idioma» Obtenga más información de W3C.

Por lo general, debe seleccionar la ubicación basada en el idioma de la página web. Esto puede ser de lang propiedad:

// Get the page's language from the HTML lang attribute
const pageLocale = document.documentElement.lang || 'en-US'; // Fallback to 'en-US'

A veces, es posible que deba sobrescribir el entorno de la página con una ubicación específica, como cuando se muestra contenido en varios idiomas:

// Force a specific locale regardless of page language
const tutorialFormatter = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' });

console.log(`Chinese example: ${tutorialFormatter.format(199.99)}`); // Output: ¥199.99

En algunos casos, es posible que deba usar el idioma preferido del usuario:

// Use the user's preferred language
const browserLocale = navigator.language || 'ja-JP';

const formatter = new Intl.NumberFormat(browserLocale, { style: 'currency', currency: 'JPY' });

Cuando instancías Intl Formatizador, puede optar por pasar una o más cadenas locales. Luego, la API seleccionará la ubicación más apropiada según la disponibilidad y las preferencias.

Habitación potente en formato núcleo

este Intl Los objetos exponen múltiples constructores, cada constructor para una tarea de formato específica. Involucremos en las gemas más utilizadas, y algunas gemas potentes, a menudo pasadas por alto.

1. Intl.DateTimeFormat: Fecha y hora, global

Formatear fechas y tiempos es un problema clásico de I18n. ¿Debería ser mm/dd/aayyy o dd.mm.yyyy? ¿Debería este mes ser un número o una palabra completa? Intl.DateTimeFormat Manejar todo esto fácilmente.

const date = new Date(2025, 6, 27, 14, 30, 0); // June 27, 2025, 2:30 PM

// Specific locale and options (e.g., long date, short time)
const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZoneName: 'shortOffset' // e.g., "GMT+8"
};

console.log(new Intl.DateTimeFormat('en-US', options).format(date));

// "Friday, June 27, 2025 at 2:30 PM GMT+8"
console.log(new Intl.DateTimeFormat('de-DE', options).format(date));

// "Freitag, 27. Juni 2025 um 14:30 GMT+8"

// Using dateStyle and timeStyle for common patterns
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'short' }).format(date));

// "Friday 27 June 2025 at 14:30"

console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'long', timeStyle: 'short' }).format(date));

// "2025年6月27日 14:30"

flexibilidad options para DateTimeFormat Enorme, puede controlar un año, mes, día, día de la semana, hora, minuto, segundo, zona horaria, etc.

2. Intl.NumberFormat: Número de matices culturales

Además de los puntos decimales simples, los números deben procesarse cuidadosamente: miles de separadores, marcadores decimales, símbolos de divisas y símbolos porcentuales varían ampliamente en toda la región.

const price = 123456.789;

// Currency formatting
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price));

// "$123,456.79" (auto-rounds)

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price));

// "123.456,79 €"

// Units
console.log(new Intl.NumberFormat('en-US', { style: 'unit', unit: 'meter', unitDisplay: 'long' }).format(100));

// "100 meters"

console.log(new Intl.NumberFormat('fr-FR', { style: 'unit', unit: 'kilogram', unitDisplay: 'short' }).format(5.5));

// "5,5 kg"

Opción minimumFractionDigits,,,,, maximumFractionDigitsy notation (Por ejemplo, scientific,,,,, compact) proporciona un control más fino.

3. Intl.ListFormat: Lista de idiomas naturales

Es muy complicado una lista de elementos. El inglés usa «y» para conjunciones y «o» para desconectar. Muchos idiomas tienen diferentes conjunciones, y algunos requieren signos de puntuación específicos.

Esta API simplifica una tarea que de otro modo requiere una lógica condicional compleja:

const items = ('apples', 'oranges', 'bananas');

// Conjunction ("and") list
console.log(new Intl.ListFormat('en-US', { type: 'conjunction' }).format(items));

// "apples, oranges, and bananas"

console.log(new Intl.ListFormat('de-DE', { type: 'conjunction' }).format(items));

// "Äpfel, Orangen und Bananen"

// Disjunction ("or") list
console.log(new Intl.ListFormat('en-US', { type: 'disjunction' }).format(items));

// "apples, oranges, or bananas"

console.log(new Intl.ListFormat('fr-FR', { type: 'disjunction' }).format(items));

// "apples, oranges ou bananas"

4. Intl.RelativeTimeFormat: Marca de tiempo amigable para humanos

Es común mostrar «hace 2 días» o «dentro de 3 meses» en la interfaz de usuario, pero se necesitan muchos datos para localizar estas frases con precisión. Intl.RelativeTimeFormat Automatizar esto.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

console.log(rtf.format(-1, 'day'));    // "yesterday"
console.log(rtf.format(1, 'day'));     // "tomorrow"
console.log(rtf.format(-7, 'day'));    // "7 days ago"
console.log(rtf.format(3, 'month'));   // "in 3 months"
console.log(rtf.format(-2, 'year'));   // "2 years ago"

// French example:
const frRtf = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto', style: 'long' });

console.log(frRtf.format(-1, 'day'));    // "hier"
console.log(frRtf.format(1, 'day'));     // "demain"
console.log(frRtf.format(-7, 'day'));    // "il y a 7 jours"
console.log(frRtf.format(3, 'month'));   // "dans 3 mois"

este numeric: 'always' Las opciones forzarán «hace 1 día» en lugar de «ayer».

5. Intl.PluralRules: Diversidad maestra

Se puede decir que este es uno de los aspectos más críticos de I18N. Diferentes idiomas tienen reglas de pluralización muy diferentes (por ejemplo, el inglés tiene singular/plural, el árabe tiene cero, uno, dos, múltiples). Intl.PluralRules Le permite determinar la «categoría plural» de un número dado en un área específica.

const prEn = new Intl.PluralRules('en-US');

console.log(prEn.select(0));    // "other" (for "0 items")
console.log(prEn.select(1));    // "one"   (for "1 item")
console.log(prEn.select(2));    // "other" (for "2 items")

const prAr = new Intl.PluralRules('ar-EG');

console.log(prAr.select(0));    // "zero"
console.log(prAr.select(1));    // "one"
console.log(prAr.select(2));    // "two"
console.log(prAr.select(10));   // "few"
console.log(prAr.select(100));  // "other"

Esta API no compuesta directamente el texto, pero proporciona la clasificación básica requerida para seleccionar la cadena de traducción correcta del paquete de mensajes. Por ejemplo, si tiene una clave de mensaje item.one,,,,, item.otherusarás pr.select(count) Elija el correcto.

6. Intl.DisplayNames: Nombre local de todo el contenido

¿Necesito mostrar el nombre del idioma, la región o el script en el idioma preferido del usuario? Intl.DisplayNames Es su solución integral.

// Display language names in English
const langNamesEn = new Intl.DisplayNames(('en'), { type: 'language' });

console.log(langNamesEn.of('fr'));      // "French"
console.log(langNamesEn.of('es-MX'));   // "Mexican Spanish"

// Display language names in French
const langNamesFr = new Intl.DisplayNames(('fr'), { type: 'language' });

console.log(langNamesFr.of('en'));      // "anglais"
console.log(langNamesFr.of('zh-Hans')); // "chinois (simplifié)"

// Display region names
const regionNamesEn = new Intl.DisplayNames(('en'), { type: 'region' });

console.log(regionNamesEn.of('US'));    // "United States"
console.log(regionNamesEn.of('DE'));    // "Germany"

// Display script names
const scriptNamesEn = new Intl.DisplayNames(('en'), { type: 'script' });

console.log(scriptNamesEn.of('Latn'));  // "Latin"
console.log(scriptNamesEn.of('Arab'));  // "Arabic"

y Intl.DisplayNamesevita el código duro innumerables asignaciones de nombres de idiomas, regiones o scripts para mantener su aplicación robusta y delgada.

Soporte del navegador

Tal vez se pregunte acerca de la compatibilidad del navegador. La buena noticia es Intl Excelente apoyo en los navegadores modernos. Todos los principales navegadores (Chrome, Firefox, Safari, Edge) admiten completamente las características principales discutidas (DateTimeFormat,,,,, NumberFormat,,,,, ListFormat,,,,, RelativeTimeFormat,,,,, PluralRules,,,,, DisplayNames). Puede usar estas API con confianza sin usarlas en la mayoría de las bases de usuarios.

Conclusión: usar Intl

este Intl API es la piedra angular del desarrollo de redes modernas para el público global. Permite a los desarrolladores front-end entregar Experiencia de usuario altamente localizada Con un esfuerzo mínimo, aproveche las características optimizadas y integradas del navegador.

Mediante la adopción Intltú Reducir las dependencias,,,,, Tamaño agrupadoy Mejorar el rendimientoMientras garantiza su aplicación respeta y se adapta a las expectativas multilingües y culturales de los usuarios de todo el mundo. ¡Deje de usar la lucha lógica formateada personalizada e incluya herramientas que cumplan con este estándar!

Es importante recordar Intl tratar con formato datos. Aunque sus características poderosas son increíbles, no resuelve todos los aspectos de la internacionalización. Traducción de contenido, texto bidireccional (RTL/LTR), fuentes para regiones específicas y matices culturales profundos más allá de los formatos de datos aún deben considerarse cuidadosamente. (¡Puedo escribirlos en el futuro!) Pero para introducir datos dinámicos de manera precisa e intuitiva, Intl Es la respuesta local del navegador.

Más lecturas y recursos

(GG, YK)