El objeto Intl provee una API rica en constructores que te permiten manipular como se muestra un contenido para casi todas tus necesidades.
Un requerimiento común es tener que mostrar números en diferentes formatos, o valores monetarios, esto lo puedes lograr al utilizar Intl.NumberFormat.
Los constructores provistos por la API Intl aceptan dos argumentos
- el valor de
localeo puesto en simple, el identificador del lenguaje que quieres utilizar options: Un objeto que te permite definir diferentes opciones de formato.
sponsor
Tu producto o servicio podría estar aquí
Cada constructor expone a lo menos un método llamado format que recibe el valor al que quieres dar formato.
Un ejemplo de que puedes lograr con esta API, es convertir un valor a diferentes monedas.
function currencyFormatter({ currency, value}) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
minimumFractionDigits: 2,
currency
})
return formatter.format(value)
}
const value = 123456
const dollar = currencyFormatter({
currency: "USD",
value
}) //$123,456.00
const pound = currencyFormatter({
currency: "GBP",
value
}) // £123,456.00
const peso = currencyFormatter({
currency: "CLP",
value
}) // CLP 123,456.00
const dinar = currencyFormatter({
currency: "DZD",
value
}) // DZD 123,456.00
En este ejemplo lo primero que encontrarás es la creación de una función.
Esta función currencyFormatter acepta un objeto con dos atributos:
currencyque es un string con el código de moneda que quieres utilizarvalueel valor numérico que quierres formatear.
Internamente la función hace uso de Intl.NumberFormat con el lenguaje en-US y define las opciones de formato
style: tiene el valor de"currency"para indicar que se mostrará en formato de moneda.minimumFractionDigits: define el todal minimo de digitos fraccionales (después del punto) que se mostrarán.currency: un string que identifica el código de moneda requerido.
Como ves en el ejemplo, puedes transformar un valor (en este caso el número 123456 ) a diferentes formatos de moneda.
Pero, esto puede ir más allá, el número de opciones es bastante largo permitiendote definir diferentes partes del formato.
type Options = {
compactDisplay?: "short" | "long"; // Only used when notation is "compact"
currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
currencySign?: "standard" | "accounting";
localeMatcher?: "lookup" | "best fit";
notation?: "standard" | "scientific" | "engineering" | "compact";
numberingSystem?: 'arab' | 'arabext' | 'bali' | 'beng' | 'deva' | 'fullwide' | 'gujr' | 'guru' | 'hanidec' | 'khmr' | 'knda' | 'laoo' | 'latn' | 'limb' | 'mlym' | 'mong' | 'mymr' | 'orya' | 'tamldec' | 'telu' | 'thai' | 'tibt';
signDisplay?: "auto" | "always" | "exceptZero" | "negative" | "never" ;
style?: "decimal" | "currency" | "percent" | "unit";
unit?: string;
unitDisplay?: "long" | "short" | "narrow";
useGrouping?: "always" | "auto" | boolean | "min2";
roundingMode?: "ceil" | "floor" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | halfEven";
roundingPriority?: "auto" | "morePrecision" | "lessPrecision";
roundingIncrement?: 1 | 2 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000;
trailingZeroDisplay?: "auto" | "stripIfInteger";
minimumIntegerDigits?: number;
minimumFractionDigits?: number;
maximumFractionDigits?: number;
minimumSignificantDigits?: number;
maximumSignificantDigits?: number;
}
Además, si por alguna razón este set de opciones no cumple con lo que necesitas, puedes hacer uso de otro método expuesto por NumberFormat: formatToParts.
Este método retorna un arreglo de objetos que representan el valor numérico como string dividido en partes, así tu puedes manipular como desees el formato.
const formatToParts = new Intl.NumberFormat('en-US', {
currency: 'USD',
style: 'currency',
minimumFractionDigits: 2
}).formatToParts(value)
/*
[
{ type: "currency", value: "$"},
{ type: "integer", value: "123" },
{ type: "group", value: "," },
{ type: "integer", value: "456" },
{ type: "decimal", value: "." },
{ type: "fraction", value: "00" }
]
Pero no solo puedes dar formato de moneda a tus números, también puedes modificar la forma en que el número se muestra.
function formatCompact(value) {
const result = new Intl.NumberFormat(
'en-US',
{ notation: "compact"}
).format(value)
return result;
}
const res1 = formatCompact(123) // 123
const res2 = formatCompact(1234) // 1.2K
const res3 = formatCompact(12345) // 12K
const res4 = formatCompact(123456) // 123K
const res5 = formatCompact(1234567) // 1.2M
La forma compacta de un número es un formato muy utilizado en redes sociales y otras aplicaciones web/móviles ya que permite “resumir” un valor sin perder su significancia y además que bastante bien en la interfaz.
Para este caso se utiliza la opción notation con el valor compact y Javascript hará su magia.
😃 Thanks for reading!
Did you like the content? Found more content like this by joining to the Newsletter or following me on Twitter
