Respuesta rápida
i18n es la abreviatura de "internacionalización" (i + 18 letras + n). Se refiere al diseño y desarrollo de software para que pueda adaptarse a usuarios de distintos idiomas y regiones sin necesidad de cambios de ingeniería.
¿Por qué "i18n"?
El término "i18n" es un numeral:
- i = primera letra
- 18 = número de letras entre "i" y "n
- n = última letra
Esta abreviatura existe porque "internacionalización" es largo y se utiliza con frecuencia en contextos técnicos.
Definición
Internacionalización (i18n): El proceso de diseñar arquitectura de software para soportar múltiples idiomas, regiones y convenciones culturales. Esto incluye:
- Extraer del código el texto dirigido al usuario
- Admitir distintos formatos de fecha, hora y número
- Manejo de idiomas de derecha a izquierda (RTL)
- Gestión de diferentes reglas de pluralización
- Permitir la expansión del texto en las traducciones
i18n vs l10n: ¿Cuál es la diferencia?
| Término Significado |------|------------|---------| | i18n Internacionalización Preparación de tu aplicación para múltiples idiomas l10n | Localización | Traducir* el contenido para un idioma específico | Localización
Analogía:
- i18n = Construir un coche con dirección en un módulo extraíble
- l10n = Instalar el volante a la izquierda (EE.UU.) o a la derecha (Reino Unido)
I18n se hace una vez. Se hace l10n para cada idioma.
¿Por qué es importante i18n?
Impacto en el negocio
| Estadística | Fuente |
|---|---|
| El 75% de los usuarios prefiere contenidos en su lengua materna | |
| El 40% no compra en sitios en otros idiomas | |
| Las aplicaciones localizadas se descargan un 128% más | |
| Los ingresos aumentan entre un 25 y un 40% al añadir idiomas clave |
Beneficios técnicos
- Escalabilidad: Añadir nuevos idiomas sin cambios en el código
- Mantenibilidad: Traducciones separadas del código
- Calidad: Tratamiento coherente del formato específico de cada idioma
Cómo funciona i18n
Paso 1: Extraer cadenas
Mueva el texto codificado a archivos separados:
Antes (hardcoded):
JSX<h1>Welcome to our app</h1> <button>Sign up</button>
Después (internacionalizado):
JSX<h1>{t('welcome.title')}</h1> <button>{t('auth.signup')}</button>
Archivo de traducción (en.json):
JSON1{ 2 "welcome": { 3 "title": "Welcome to our app" 4 }, 5 "auth": { 6 "signup": "Sign up" 7 } 8}
Paso 2: Manejar Variables
Utilice la interpolación en lugar de la concatenación:
Mal:
JavaScript"Hello, " + name + "!"
Bueno:
JavaScriptt('greeting', { name: name }) // Translation: "Hello, {name}!"
Paso 3: Apoyar la pluralización
Diferentes idiomas tienen diferentes reglas de plural:
| Idioma | Formas plurales |
|---|---|
| Inglés 2 (uno, otro) | |
| Francés 2+ (uno, otro, muchos) | |
| Ruso 3 (uno, pocos, muchos) | |
| Árabe 6 (cero, uno, dos, pocos, muchos, otros) |
Implementación:
JSON{ "items": "{count, plural, =0 {No items} =1 {1 item} other {# items}}" }
Paso 4: Formatear fechas, números y monedas
Utilice un formato que tenga en cuenta la configuración regional:
JavaScript1// Date formatting 2new Intl.DateTimeFormat('en-US').format(date) // "12/31/2026" 3new Intl.DateTimeFormat('de-DE').format(date) // "31.12.2026" 4 5// Currency formatting 6new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(99) 7// "$99.00" 8 9new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(99) 10// "99,00 €"
Paso 5: Compatibilidad con lenguajes RTL
El árabe, el hebreo y el persa se leen de derecha a izquierda:
HTML<html dir="rtl" lang="ar">
CSS/* Use logical properties */ margin-inline-start: 1rem; /* Instead of margin-left */
i18n by Framework
React
JSX1// Using react-i18next 2import { useTranslation } from 'react-i18next'; 3 4function App() { 5 const { t } = useTranslation(); 6 return <h1>{t('welcome')}</h1>; 7}
Next.js
JSX1// Using next-intl 2import { useTranslations } from 'next-intl'; 3 4function Page() { 5 const t = useTranslations('home'); 6 return <h1>{t('title')}</h1>; 7}
Vue
VUE1<!-- Using vue-i18n --> 2<template> 3 <h1>{{ $t('welcome') }}</h1> 4</template>
iOS (Swift)
Swiftlet title = NSLocalizedString("welcome", comment: "Welcome message")
Android (Kotlin)
Kotlinval title = getString(R.string.welcome)
Errores comunes de i18n
1. Concatenación de cadenas
Erróneo:
JavaScript"Hello " + name + ", you have " + count + " items"
Correcto:
JavaScriptt('message', { name, count })
2. Formato codificado
Erróneo:
JavaScript`$${price.toFixed(2)}`
Derecha:
JavaScriptnew Intl.NumberFormat(locale, { style: 'currency', currency }).format(price)
3. Disposiciones de ancho fijo
Erróneo:
CSS.button { width: 100px; }
Derecha:
CSS.button { min-width: 100px; padding: 0 1rem; }
El texto alemán es ~30% más largo que el inglés. Permitir la expansión.
4. Dividir frases
Erróneo:
JSX<span>{t('click')}</span> <a>{t('here')}</a> <span>{t('to_continue')}</span>
Correcto:
JSX<Trans i18nKey="click_here"> Click <a>here</a> to continue </Trans>
Herramientas i18n
| Categoría Herramientas |----------|-------| | Bibliotecas | react-i18next, next-intl, vue-i18n, FormatJS | TMS (Gestión) | IntlPull, Lokalise, Crowdin | Phrase TMS (Gestión) IntlPull, Lokalise, Crowdin, Phrase | Traducción automática** Google Translate, DeepL, GPT-4 | Herramientas de pseudolocalización
Preguntas frecuentes
¿Qué significa i18n?
i18n es el acrónimo de "internacionalización", un numeral en el que 18 representa el número de letras entre la 'i' y la 'n'.
¿Cuál es la diferencia entre i18n y l10n?
i18n (internacionalización) es preparar tu código para que sea compatible con varios idiomas. l10n (localización) es la traducción real del contenido a idiomas específicos.
¿Es lo mismo i18n que traducción?
No. i18n es la preparación técnica que permite la traducción. La traducción forma parte de l10n (localización), que viene después de i18n.
¿Cómo empiezo con la i18n?
- Elige una librería i18n para tu framework (react-i18next, next-intl, etc.)
- Extraer las cadenas codificadas a los archivos de traducción
- Sustituir el texto codificado por llamadas a funciones de traducción
- Formateo local de fechas, números y divisas
- Utilizar un TMS como IntlPull para gestionar las traducciones
¿Qué es una configuración regional?
Una configuración regional es una combinación de idioma y región, por ejemplo
- en-US (inglés, Estados Unidos)
- en-GB (inglés, Reino Unido)
- es-ES (español, España)
- es-MX (español, México)
¿Es difícil implantar i18n?
La configuración inicial de i18n requiere esfuerzo, pero las bibliotecas modernas lo hacen sencillo. La clave está en empezar pronto. Adaptar i18n a una gran base de código es mucho más difícil que incorporarlo desde el principio.
Resumen
i18n (internacionalización) es la base para construir software que funcione en todos los idiomas y regiones. Puntos clave:
- i18n = preparar el código para varios idiomas
- l10n = traducción real del contenido
- Extraer cadenas, usar interpolación, admitir plurales
- Utilizar un formato adaptado a la localización para fechas y números
- Manejo de idiomas RTL
- Elija la biblioteca adecuada para su marco de trabajo
**¿Listo para internacionalizar tu aplicación? IntlPull te ayuda a gestionar las traducciones con automatización basada en IA y actualizaciones OTA para aplicaciones móviles.
