Cómo empezar con la internacionalización en JavaScript

Al adaptar nuestras aplicaciones a diferentes idiomas y países, ofrecemos una mejor experiencia de usuario. Es más sencillo para los usuarios lidiar con notaciones conocidas para fechas, monedas y números.

La internacionalización (i18n) implica agregar soporte para diferentes idiomas y países en su aplicación.El número 18 representa el número de letras entre la primera 'i' y la última 'n' .

Algunos ejemplos de internacionalización pueden ser la compatibilidad con Unicode, la personalización de la interfaz de usuario para diferentes alfabetos o la clasificación de matrices de cadenas que no están en inglés.

JavaScript implementa la especificación API de internacionalización y define el objeto Intl integrado.

Y lo que lo hace tan útil es que tiene una gran compatibilidad entre navegadores y compatibilidad con Node.js:

¡Empecemos!

El Intlobjeto proporciona acceso a varios constructores, como:

  • Intl.DateTimeFormat : formato de fecha y hora sensible al idioma.
  • Intl.NumberFormat: formato de número sensible al idioma.
  • Intl.PluralRules: formato sensible al plural y reglas del lenguaje plural.
  • Intl.Collator: comparación de cadenas sensible al idioma.

La creación de cualquiera de estos objetos sigue un patrón simple:

const formatter = new Intl.ctor(locales, options);

Por ejemplo, la configuración regional " de-AT" : idioma alemán tal como se usa en Austria:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Luego llamamos al método format () con un objeto Date proporcionado :

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Contiene solo códigos de idioma y país. Pronto veremos ejemplos más completos. Aquí puede encontrar más ejemplos de configuraciones regionales.

Podemos usar navigator.language, el idioma preferido por el usuario, que usamos como configuración regional:

Aquí, en lugar de llamar a un método de formato directamente, podemos asignarlo como una función. Es genial porque una vez que hemos creado una función de formato especializada, podemos usarla varias veces.

¡Solo unas pocas líneas de código y tienes una fecha localizada!

Entonces, a continuación, profundizaremos y aprenderemos más sobre los lugares. Si no está listo para ello y solo desea ver demostraciones geniales como esta en la imagen a continuación, vaya a la sección de ejemplos a continuación.

Buceando más profundo

Bueno, esto es suficiente para tener una idea de cómo funciona, pero los casos de uso reales podrían complicarse mucho más. ¿Y si quisiéramos:

  • mostrar nuestra fecha usando el calendario japonés o persa
  • use dígitos tailandés o árabe-índico para fechas y números
  • usar chino simplificado
  • Cualquier combinación de las anteriores ?

¿Qué es Locale?

Para trabajar con esta API, tenemos que aprender más sobre las configuraciones regionales. En primer lugar, démosle una definición.

Una configuración regional es un identificador que se refiere a un conjunto de preferencias del usuario, como:

  • fechas y horas
  • números y monedas
  • nombres traducidos para zonas horarias, idiomas y países
  • unidades de medida
  • orden de clasificación (colación)

Una configuración regional no distingue entre mayúsculas y minúsculas. Es solo una convención .

La configuración regional debe ser una cadena que contenga una etiqueta de idioma BCP 47 y todas las partes están separadas por guiones.

Echemos un vistazo al siguiente ejemplo:

De nuevo, ¿solo cuatro líneas de código? Echemos un vistazo al diagrama a continuación y examinemos cada parte de nuestra configuración regional:

En esta imagen, puede ver que solo se requiere la primera parte, el código de idioma. Es poco probable que necesite una configuración regional como esta. Pero este es un buen ejemplo de cómo echar un vistazo a todas las partes posibles de la configuración regional y hacerse una idea de qué es una configuración regional.

Nuestra configuración regional contiene todas las partes posibles:

  • zh (código de idioma) - idioma chino
  • Hans (código de script): escrito en caracteres simplificados
  • CN (código de país): como se utiliza en China.
  • bauddha (variante) - usando un dialecto sánscrito híbrido budista
  • u-nu-hanidec (extensión) - usando números decimales Han

A continuación, puede encontrar más ejemplos de secuencias de comandos, variantes y extensiones.

Códigos de secuencia de comandos

Se utilizan con etiquetas de idioma para indicar en qué secuencia de comandos está escrito un idioma. Por ejemplo:

Códigos de variante

Las variantes representan un dialecto del idioma.

Extensiones

Incluye diferentes calendarios y sistemas numéricos.

Los calendarios tienen el prefijo "u-ca-", valores posibles (no todos incluidos):

Los sistemas numéricos tienen el prefijo "u-nu", valores posibles (no todos incluidos):

La organización de Iana es responsable de mantener actualizada esta lista.

Negociación local

Lo último que tenemos que aprender sobre las configuraciones regionales es cómo se resuelven. Vimos este ejemplo antes:

const formatter = new Intl.ctor(locales, options);

El localesargumento especifica una única configuración regional o una matriz de configuraciones regionales. El entorno (navegador o Node.js) lo compara con las configuraciones regionales que tiene disponibles y elige la mejor.

Hay dos algoritmos de coincidencia:

  • búsqueda : verifica de más específico a menos: si zh-Hans-SG no está disponible, obtenga zh-Hans , si no, zh, de lo contrario , una configuración regional predeterminada.
  • mejor ajuste (predeterminado): algoritmo mejorado. Si se solicita “es-GT” - español para Guatemala, pero no se encuentra, entonces, en lugar de proporcionar un respaldo como “es”, se elegirá el “es-MX” - español en México.

Si proporcionamos una serie de configuraciones regionales, la primera coincidencia gana.

Entonces, suficiente teoría, ¡ahora es el momento de practicar!

Ejemplos

El código de los ejemplos se puede encontrar en GitHub.

Formato de fecha / hora

Las configuraciones regionales no son lo único bueno de la API de Intl. Puede modificar el resultado de la forma que desee mediante un optionsargumento.

¡Esta es una actualización masiva en comparación con el objeto Date !

A diferencia de moment.js, no puede intercambiar manualmente ninguna parte de la fecha, como año y mes. En su lugar, debe usar la configuración regional adecuada. Esto puede parecer una limitación , pero lo hace más familiar para nuestros usuarios.

Formato de número

Sabiendo cómo lidiar con las fechas, sabes cómo lidiar con los números. La única diferencia es la lista de opciones:

Formato de moneda

Para las monedas usamos Intl.NumberFormatconstructor, pero proporcionamos una lista diferente de opciones:

Tenga en cuenta que no convertimos dinero aquí. Todo lo que hacemos es formatear el número 172630 usando las reglas de moneda apropiadas . Aquí puede encontrar la lista de códigos de moneda.

Formato de reglas plurales

Esto le indica qué formulario se aplica en función de un número determinado para una configuración regional específica:

Puede ser muy útil para formatear números ordinales:

Clasificación de cadenas

Ordenar cadenas que contienen letras adicionales como ä en alemán o sueco no es lo que desea hacer manualmente, solo porque el orden depende del idioma. Por suerte para nosotros, lo hemos hecho . Y nuevamente, todo lo que tenemos que hacer es proporcionar una configuración regional requerida:Intl.Collator

Conclusión

La internacionalización es un tema grande y complejo. Pero si sabe qué es una configuración regional y cómo construirla, el resto es muy fácil de usar.

¡Eso es!

Si tiene alguna pregunta o comentario, hágamelo saber en los comentarios a continuación o envíeme un ping en Twitter.

Si esto fue útil, haga clic en el aplauso. abotone abajo algunas veces para mostrar su apoyo! ⬇⬇ ??

Aquí hay más artículos que he escrito:

Cómo simplificar su base de código con map (), reduce () y filter () en JavaScript

Cuando lees acerca de Array.reduce y lo genial que es, el primer y, a veces, el único ejemplo que encuentras es la suma de… medium.freecodecamp.org Configuración de las API REST de Node.js lista para producción usando TypeScript, PostgreSQL y Redis.

Hace un mes me asignaron la tarea de crear una API de búsqueda simple. Todo lo que tenía que hacer era obtener algunos datos de terceros ... medium.com

Gracias por leer ❤️