Formato de números y monedas
Use Intl.NumberFormat para mostrar números según la configuración regional.
Formato de números y monedas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
El espacio de nombres Intl
Intl es la API integrada de internacionalización de JavaScript. Formatea números, fechas, monedas y mucho más según las convenciones de una configuración regional, sin necesidad de ninguna biblioteca.
console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"Conceptos básicos de Intl.NumberFormat
Cree un formateador con una configuración regional y, después, llame a format(). Las configuraciones regionales utilizan etiquetas BCP 47 como "en-US" o "de-DE".
const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"Diferencias entre configuraciones regionales
El mismo número se muestra de forma diferente según la configuración regional. En alemán se utilizan puntos para los millares y una coma para los decimales.
const n = 1234567.89;
console.log(new Intl.NumberFormat("en-US").format(n)); // 1,234,567.89
console.log(new Intl.NumberFormat("de-DE").format(n)); // 1.234.567,89Formato de monedas
Pase style: "currency" y un código de currency. El símbolo y su posición siguen las convenciones de la configuración regional.
const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"Monedas en distintas configuraciones regionales
La moneda sigue siendo la misma, pero su presentación se adapta a la configuración regional elegida.
const opts = { style: "currency", currency: "EUR" };
console.log(new Intl.NumberFormat("en-IE", opts).format(1000)); // €1,000.00
console.log(new Intl.NumberFormat("de-DE", opts).format(1000)); // 1.000,00 €Estilo de porcentaje
style: "percent" multiplica el valor por 100 y añade el signo de porcentaje de la configuración regional.
const pct = new Intl.NumberFormat("en-US", { style: "percent" });
console.log(pct.format(0.1875)); // "19%"
console.log(new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 2 }).format(0.1875)); // "18.75%"Controlar los dígitos decimales
minimumFractionDigits y maximumFractionDigits controlan el número de posiciones decimales.
const f = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(f.format(3)); // "3.00"
console.log(f.format(3.14159)); // "3.14"Unidades
style: "unit" junto con una unit permite formatear medidas como kilómetros o litros.
const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"Notación compacta
notation: "compact" abrevia los números grandes (1,2 mil, 3,4 M), lo que resulta ideal para los recuentos de redes sociales.
const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500)); // "1.5K"
console.log(c.format(2300000)); // "2.3M"Mostrar el signo
signDisplay: "always" muestra un signo incluso para los valores positivos, lo que resulta práctico para diferencias y cambios.
const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5)); // "+5"
console.log(s.format(-5)); // "-5"Reutilizar formateadores
Crear un formateador es relativamente costoso. Créelo una vez y reutilícelo para muchos valores, en lugar de crear uno en cada llamada.
const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const prices = [9.99, 19.5, 100];
console.log(prices.map((p) => money.format(p)));Comprobación rápida
Pruebe el formato de números.
Repaso: números y monedas
Ha formateado números según la configuración regional, ha gestionado monedas, porcentajes, unidades, notación compacta y signos, ha controlado los dígitos decimales y ha aprendido a reutilizar formateadores. A continuación: fechas y horas.
Preguntas frecuentes
¿La lección «Formato de números y monedas» es gratis?
Sí — el texto completo de «Formato de números y monedas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Formato de números y monedas»?
Use Intl.NumberFormat para mostrar números según la configuración regional. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Formato de números y monedas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Formato de números y monedas
- Formato de fechas y horas
- Tiempo relativo y plurales
- Ordenación según la configuración regional