JavaScript Academy · Aula

Tempo relativo e plurais

Use RelativeTimeFormat e PluralRules.

Tempo relativo e plurais é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Intl.RelativeTimeFormat

Intl.RelativeTimeFormat produz frases como "há 3 dias" ou "em 2 horas" no idioma do usuário.

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 o passado, positivo para o futuro

O sinal do número define a direção: um valor negativo indica o passado, e um positivo indica o 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"

A opção numeric

numeric: "auto" usa palavras idiomáticas como "ontem" ou "amanhã", em vez de "há 1 dia".

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

Tempo relativo localizado

Alterar a localidade traduz automaticamente a frase inteira.

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

Escolhendo a unidade certa

Aplicativos reais escolhem a maior unidade adequada. Calcule a diferença em segundos e avance pelas unidades, da maior para a menor.

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

Pluralizar é mais do que acrescentar "s". Intl.PluralRules associa um número a uma categoria, como "one" ou "other", de acordo com cada 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"

Criando mensagens no plural

Use a categoria para escolher a palavra correta.

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 com mais formas

Muitos idiomas têm várias categorias de plural. O polonês, por exemplo, diferencia "few" e "many" — uma lógica em inglês escrita diretamente no código estaria errada.

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

Plurais ordinais

Passe type: "ordinal" para obter categorias de ordinais como 1º, 2º e 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

Combinando com números

Combine PluralRules com NumberFormat para criar mensagens de contagem totalmente localizadas.

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

Um recurso adicional: Intl.ListFormat une itens usando conjunções corretas para a localidade.

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

Verificação rápida

Teste o tempo relativo e os plurais.

Recapitulação: tempo relativo e plurais

Você formatou o tempo relativo com RelativeTimeFormat (incluindo numeric: "auto"), selecionou limites de unidades, aplicou plurais corretamente com PluralRules em diferentes idiomas e ordinais e uniu listas com ListFormat. A seguir: ordenação por localidade.

Perguntas Frequentes

A aula “Tempo relativo e plurais” é grátis?

Sim — o texto completo de “Tempo relativo e plurais” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Tempo relativo e plurais”?

Use RelativeTimeFormat e PluralRules. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Tempo relativo e plurais”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy