Internacionalización en ES6 (y 3): La clase NumberFormat

Introducción

Para terminar con esta mini-serie de artículos sobre internacionalización, a lo largo de los dos anterior artículos (parte 1 y parte 2), descubrimos el namespace Intl, así como las ventajas que ofrece su uso. En este último artículo, descubriremos como mejorar el formateo de números gracias a la clase NumberFormat.

NumberFormat

El objeto Intl.NumberFormat nos permite construir objetos que nos ayudarán a convertir valores numéricos en cadenas con el formato de un país determinado. A continuación podéis ver un ejemplo básico:

var local = 'es-ES';
var options = {};
var numberFormat = new Intl.NumberFormat(local, options);

var myNumber = 1234567.89;
console.log(numberFormat.format(myNumber));
// La salida es: 1.234.567,89

• local: parámetro obligatorio que será una cadena o array de cadenas con el idioma en formato BCP 47.
• options: parámetro opcional en el que se especifica una serie de opciones para aplicar el formato de número que veremos en el apartado siguiente.

El atributo options

Al igual que con sus clases "hermanas", NumberFormat tiene un atributo options, mediante el cuál se puede especificar el formato de la cadena de salida. Pasemos a ver las más comunes.

style

Indica la representación que se utilizará para mostrar el valor numérico. Sus valores son decimal, currency y percente. El primer caso es el valor por defecto; mientras que con el valor currency permite definir el formato moneda, el cuál requiere de otro parámetros llamado currency que indica el tipo de moneda a representar (los valores que puede tomar los encontrarás en este XML); finalmente, el valor percent muestra el símbolo de porcentaje al final del valor, además de multiplicar el valor indicado por 100, como se puede ver en el último ejemplo.

var myNumber = 1234567.89;
var options = { style: 'decimal'};
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89

options = { style: 'currency', currency: 'EUR'};
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89 €

options = { style: 'percent'};
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 123.456.789

myNumber = 0.23;
console.log(numberFormat.format(myNumber));
// Salida: 23

currencyDisplay

Gracias a esta opción, junto con el estilo currency, podremos personalizar el formato que se mostrará para la moneda. Puede tomar los valores symbol (valor por defecto, que muestra el símbolo de la moneda), code (la moneda se muestra con su código ISO) y name (que muestra el nombre completo de la moneda). Al final del ejemplo podéis comprobar que el formato name tiene la ventaja de distinguir entre singular y plural.

var myNumber = 1234567.89;
var options = { style: 'currency', currency: 'EUR', currencyDisplay: 'symbol'};
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89& €

options = { style: 'currency', currency: 'EUR', currencyDisplay: 'code'};
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89& EUR

options = { style: 'currency', currency: 'EUR', currencyDisplay: 'name'};
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89 euros

myNumber = 1;
console.log(numberFormat.format(myNumber));
// Salida: 1,00 euro

useGrouping

Especifica si se usan los separadores en los grupos de número o no. Sus posibles valores son true (valor por defecto) y false.

var myNumber = 1234567.89;
var options = { useGrouping: true };
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89

options = { useGrouping: false };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1234567,89

minimumIntegerDigits

Indica el número mínimo de valores enteros a mostrar al formatear el número. Si el valor a convertir tiene menos dígitos enteros se añadirán ceros al principio. Puede tomar valores entre 1 y 21.

var myNumber = 1234567.89;
var options = { minimumIntegerDigits: 12 };
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 000.001.234.567,89

options = { minimumIntegerDigits: 1 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89

options = { minimumIntegerDigits: 21 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida 000.000.000.000.001.234.567,89

minimumFractionDigits

De forma parecida al atributo anterior, minimumFractionDigits indica el número mínimo de valores decimales a mostrar al formatear el número. Si el valor a convertir tiene menos dígitos decimales se añadirán ceros al final. Puede tomar valores entre 0 y 20. Si este parámetro no se especifica, se usa el valor por defecto para el idioma indicado.

var myNumber = 1234567.89;
var options = { minimumFractionDigits: 12 };
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,890000000000

options = { minimumFractionDigits: 1 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida 1.234.567,89

options = { minimumFractionDigits: 20 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89000000000000000000

maximumFractionDigits

En esta ocasión, con este parámetro limitaremos el número de decimales a mostrar. En el caso de que el número de decimales sea mayor que el establecido con este parámetro, se realizará un rendondeo. Su valores están comprendidos entre 0 y 20.

var myNumber = 1234567.89;
var options = { maximumFractionDigits: 0 };
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.568

options = { maximumFractionDigits: 10 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida 1.234.567,89

options = { maximumFractionDigits: 1 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,9

minimumSignificantDigits

Define el número mínimo de dígitos totales con que contará el valor formateado. Puede tomar valores del rango 1 a 21. El incremento de cifras se realiza por la parte decimal como se puede ver en los ejemplos siguientes:

var myNumber = 1234567.89;
var options = { minimumSignificantDigits: 1 };
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89

options = { minimumSignificantDigits: 10 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,890

options = { minimumSignificantDigits: 21 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,89000000000000

myNumber = 1234567;
options = { minimumSignificantDigits: 10 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,000

maximumSignificantDigits

Finalmente, este parámetro define el número máximo de cifras a mostrar para el número. Con números enteros realiza un redondeo a la unidad superior. Puede tomar valores del rango 1 a 21.

var myNumber = 1234567.89;
var options = { maximumSignificantDigits: 1 };
var numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.000.000

options = { maximumSignificantDigits: 5 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.600

options = { maximumSignificantDigits: 8 };
numberFormat = new Intl.NumberFormat(local, options);
console.log(numberFormat.format(myNumber));
// Salida: 1.234.567,9

Compatibilidad

Enlaces

• Descripción de la clase en MDN
• Internacionalización en ES6 2: La clase DateTimeFormat
• Internacionalización en ES6 1: La clase Collator