0Pricing
JavaScript Academy · Lección

Tiempo relativo y plurales

Use RelativeTimeFormat y PluralRules.

Tiempo relativo y plurales es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 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.

Intl.RelativeTimeFormat

Intl.RelativeTimeFormat produce expresiones como «hace 3 días» o «dentro de 2 horas» en el idioma del usuario.

const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-1, "day")); // "1 day ago"
console.log(rtf.format(2, "hour"));  // "in 2 hours"

Negativo para el pasado, positivo para el futuro

El signo del número establece la dirección: un valor negativo indica el pasado y uno positivo, el futuro.

const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-3, "week")); // "3 weeks ago"
console.log(rtf.format(5, "minute")); // "in 5 minutes"

La opción numeric

numeric: "auto" utiliza palabras idiomáticas como «ayer» o «mañana» en lugar de «hace 1 día».

const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "yesterday"
console.log(rtf.format(0, "day"));  // "today"

Tiempo relativo localizado

Al cambiar la configuración regional, toda la expresión se traduce automáticamente.

console.log(new Intl.RelativeTimeFormat("es").format(-2, "day")); // "hace 2 dias"
console.log(new Intl.RelativeTimeFormat("fr").format(3, "hour")); // "dans 3 heures"

Elegir la unidad adecuada

Las aplicaciones reales eligen la unidad más grande que tenga sentido. Calcule la diferencia en segundos y vaya pasando por las distintas unidades.

function ago(date) {
  const diff = (date - Date.now()) / 1000;
  const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
  if (Math.abs(diff) < 60) return rtf.format(Math.round(diff), "second");
  if (Math.abs(diff) < 3600) return rtf.format(Math.round(diff / 60), "minute");
  return rtf.format(Math.round(diff / 3600), "hour");
}
console.log(ago(new Date(Date.now() - 90000)));

Intl.PluralRules

La formación de plurales es algo más que añadir una «s». Intl.PluralRules asigna un número a una categoría como "one" u "other" según el idioma.

const pr = new Intl.PluralRules("en-US");
console.log(pr.select(1)); // "one"
console.log(pr.select(2)); // "other"
console.log(pr.select(0)); // "other"

Crear mensajes con plurales

Utilice la categoría para elegir la palabra correcta.

const pr = new Intl.PluralRules("en-US");
const forms = { one: "item", other: "items" };
function label(n) { return n + " " + forms[pr.select(n)]; }
console.log(label(1)); // "1 item"
console.log(label(5)); // "5 items"

Idiomas con más formas plurales

Muchos idiomas tienen varias categorías de plural. Por ejemplo, el polaco distingue "few" y "many"; una lógica de inglés escrita directamente en el código sería incorrecta.

const pr = new Intl.PluralRules("pl");
console.log(pr.select(1)); // "one"
console.log(pr.select(3)); // "few"
console.log(pr.select(5)); // "many"

Plurales ordinales

Pase type: "ordinal" para obtener categorías para ordinales como 1.º, 2.º y 3.º.

const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
const suffix = { one: "st", two: "nd", few: "rd", other: "th" };
function ordinal(n) { return n + suffix[pr.select(n)]; }
console.log(ordinal(1), ordinal(2), ordinal(3), ordinal(11)); // 1st 2nd 3rd 11th

Combinar con números

Combine PluralRules con NumberFormat para crear mensajes de cantidades completamente localizados.

const nf = new Intl.NumberFormat("en-US");
const pr = new Intl.PluralRules("en-US");
const forms = { one: "file", other: "files" };
function msg(n) { return nf.format(n) + " " + forms[pr.select(n)]; }
console.log(msg(1000)); // "1,000 files"

Intl.ListFormat

Como extra, Intl.ListFormat une elementos mediante conjunciones correctas para cada configuración regional.

const lf = new Intl.ListFormat("en-US", { type: "conjunction" });
console.log(lf.format(["red", "green", "blue"])); // "red, green, and blue"

Comprobación rápida

Pruebe el tiempo relativo y los plurales.

Repaso: tiempo relativo y plurales

Ha formateado el tiempo relativo con RelativeTimeFormat (incluido numeric: "auto"), ha seleccionado umbrales de unidades, ha formado plurales correctamente en distintos idiomas y ordinales con PluralRules y ha unido listas con ListFormat. A continuación: ordenación según la configuración regional.

Preguntas frecuentes

¿La lección «Tiempo relativo y plurales» es gratis?

Sí — el texto completo de «Tiempo relativo y plurales» 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 «Tiempo relativo y plurales»?

Use RelativeTimeFormat y PluralRules. 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 3 de 4.

¿Cuánto tiempo toma la lección «Tiempo relativo y plurales»?

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

  1. Formato de números y monedas
  2. Formato de fechas y horas
  3. Tiempo relativo y plurales
  4. Ordenación según la configuración regional
← Volver a JavaScript Academy