Llegue a un público más amplio adaptando su contenido a cualquier idioma o configuración regional con la API internacional.

La API internacional simplifica el formateo y la manipulación de texto, números, fechas y monedas internacionalizados. Le permite manejar varios formatos de datos según la configuración regional.

Esta API resuelve el desafío de formatear datos para diferentes culturas e idiomas. Facilita el formateo de números con el símbolo de moneda o fechas apropiados usando el formato de fecha apropiado para una región específica.

Con la API de Intl, puede crear aplicaciones web que sean accesibles y fáciles de usar para audiencias de todas las regiones y culturas.

Obtener la configuración regional de un usuario

El Constructores de JavaScript proporcionados por la API internacional identifican la configuración regional que usarán para formatear la fecha, el texto, el número, etc., siguiendo un patrón familiar. Cada constructor toma un lugar y un opciones objeto como argumentos. Usando estos argumentos, el constructor hace coincidir las configuraciones regionales solicitadas con las configuraciones regionales que admiten actualmente.

instagram viewer

Para obtener la configuración regional de un usuario, puede utilizar el navegador.idioma propiedad. Esta propiedad devuelve una cadena que representa la versión de idioma del navegador.

el valor de la navegador.idioma La propiedad es una etiqueta de idioma BCP 47, que consta de un código de idioma y, opcionalmente, un código de región y otras subetiquetas. Por ejemplo, "en-US" representa el inglés hablado en los Estados Unidos.

También puede utilizar el navegador.idiomas propiedad para obtener una matriz de los idiomas preferidos del usuario, ordenados por prioridad. El primer elemento de la matriz representa la preferencia de idioma principal del usuario.

Una vez que haya obtenido la configuración regional del usuario, puede personalizar la visualización de fechas, horas, números y monedas de su aplicación usando el internacional API.

Puedes crear un sencillo Función JavaScript para ayudarlo a obtener la configuración regional de un usuario. Aquí hay un fragmento de código que puede ayudar:

constante getUserLocale = () => {
si (navegador.idiomas && navegador.idiomas.longitud) {
devolver navegador.idiomas[0];
 }
devolver navegador.idioma;
};
consola.log (getUserLocale());

Este getUserLocale La función devuelve el primer elemento de la propiedad navigator.languages ​​si está disponible. De lo contrario, recurre a la propiedad navigator.language, que representa el idioma preferido del usuario en navegadores más antiguos.

Formateo de fechas para diferentes localidades

Para formatear fechas usando el internacional API, puede utilizar la internacional Formato de fecha y hora () constructor. Este constructor toma dos argumentos: una cadena de configuración regional y un objeto de opciones.

El objeto de opciones puede contener propiedades que controlan el formato de la fecha.

Algunas de las opciones comúnmente utilizadas incluyen:

  • día laborable: Esta opción especifica el formato del día de la semana. Puede configurarlo en cualquiera largo (Viernes), corto (viernes), o angosto (F).
  • año: Esta opción especifica el formato del año. Puede configurarlo en cualquiera numérico (2023) o 2 dígitos (23).
  • mes: Esta opción especifica el formato del mes. Puede configurarlo en cualquiera numérico (3), 2 dígitos (03), largo (Marzo), corto (marzo), o angosto (METRO).
  • día: Esta opción especifica el formato del día. Puede configurarlo en cualquiera numérico (2) o 2 dígitos (02).

Aquí hay un ejemplo que muestra cómo formatear una fecha usando el internacional Formato de fecha y hora () constructor:

constante fecha = Fecha.ahora()
constante configuración regional = getUserLocale();
constante opciones = {
 día laborable: "largo",
 año: "numérico",
 mes: "largo",
 día: "numérico",
};


constante formateador = nuevointernacional.DateTimeFormat (configuración regional, opciones);
// día de la semana, fecha del mes, año (viernes, 24 de marzo de 2023)
consola.log (formateador.formato (fecha));

Este código configura un objeto formateador al pasar la configuración regional del usuario a internacional Formato de fecha y hora (), junto con un conjunto de opciones. Luego usa el formateador para transformar la fecha actual en una cadena. El opciones El objeto contiene propiedades que controlan el formato de la fecha.

Dar formato a diferentes tipos de números

Puedes usar el internacional API para formatear números usando el internacional Formato numérico() constructor. Como internacional Formato de fecha y hora (), este constructor toma una cadena de configuración regional y un objeto de opciones como argumentos.

El objeto de opciones contiene propiedades que controlan el formato del número. Estas propiedades varían dependiendo de la especificación estilo del número

Formateo de decimales y porcentajes

Puede formatear números como decimales y porcentajes usando internacional Formato numérico() constructor estableciendo la propiedad de estilo en decimal para decimales y por ciento para porcentajes.

Aquí hay un ejemplo que muestra cómo formatear un decimal:

constante número = 123456;
constante configuración regional = getUserLocale(); // es-ES
constante opciones = {
 estilo: "decimal",
 dígitosfracciónmínimos: 2,
 máximoFractionDigits: 2,
 uso Agrupación: verdadero,
};


constante formateador = nuevointernacional.NumberFormat (localidad, opciones);
consola.log (formateador.formato (num)); // 123,456.00

El bloque de código anterior formatea 123,456 como un decimal con separadores de agrupación (,) y dos decimales.

Aquí hay un ejemplo que muestra cómo dar formato a un porcentaje:

constante número = 123456;
constante configuración regional = getUserLocale();
constante opciones = {
 estilo: "por ciento",
 uso Agrupación: verdadero,
};


constante formateador = nuevointernacional.NumberFormat (localidad, opciones);
consola.log (formateador.formato (num)); // 12,345,600%

El bloque de código anterior expresa 123.456 como un porcentaje con separadores de agrupación.

Formateo de monedas

Puede formatear números como monedas configurando la propiedad de estilo en divisa. Debe establecer otras opciones junto a él, como:

  • divisa: una cadena que representa el código de moneda ISO 4217 (como "USD", "EUR" o "JPY") que se utilizará para formatear. Si no proporciona esta opción, el formateador elegirá un código de moneda según la configuración regional del usuario.
  • monedaDisplay: esta propiedad especifica cómo el navegador debe mostrar la moneda. puede ser símbolo (US$ 75), código (USD 75), o nombre (75 dólares estadounidenses).

Aquí hay un ejemplo que muestra cómo puede formatear la moneda:

constante número = 123456;
constante configuración regional = getUserLocale(); // es-ES
constante opciones = {
 estilo: "divisa",
 divisa: "DÓLAR ESTADOUNIDENSE",
 exhibición de moneda: "código",
};


constante formateador = nuevointernacional.NumberFormat (localidad, opciones);
consola.log (formateador.formato (num)); // USD 123.456,00

El bloque de código anterior formatea 123.456 como moneda (USD).

Unidades de formato

Puedes usar el internacional Formato numérico() constructor para formatear números con unidades, como longitud, volumen y masa. Puede hacer esto configurando el estilo a unidad. Cuando establece el estilo en unidad, debe especificar estas opciones:

  • unidad: esta propiedad especifica la unidad que se utilizará para el formato, como "metro", "kilogramo", "litro", "segundo", etc.
  • pantalla de unidad: Esta propiedad especifica cómo el navegador debe mostrar la unidad. Puede configurarlo en cualquiera largo (10 litros), corto (10 L), o angosto (10l).

Aquí hay un ejemplo que muestra cómo puede formatear unidades:

constante número = 123456;
constante configuración regional = getUserLocale();
constante opciones = {
 estilo: "unidad",
 unidad: "litro",
 visualización de la unidad: "largo",
};


constante formateador = nuevointernacional.NumberFormat (localidad, opciones);
consola.log (formateador.formato (num)); //123.456 litros

El bloque de código anterior formatea el número 123,456 como una unidad en litros.

Alternativas a la API internacional

La API internacional proporciona un conjunto de herramientas potente y flexible para dar formato a fechas, números, monedas y unidades en aplicaciones de JavaScript. Admite muchas configuraciones regionales y proporciona una forma uniforme de formatear datos en diferentes culturas e idiomas.

Es posible que desee utilizar una biblioteca alternativa, como Luxon o Day.js, debido a la compatibilidad limitada del navegador con Intl. En última instancia, decidir entre la API internacional o una alternativa depende de los requisitos y restricciones específicos de su proyecto.