Formatação de números, datas e moedas
n() para números, d() para datas, formatos de data e hora e numberFormats por localidade.
Formatação de números, datas e moedas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Números e datas variam conforme a localidade
1,000.50 nos US corresponde a 1.000,50 em grande parte da Europa. As datas e as moedas também variam. O Vue I18n encapsula as APIs Intl do navegador para que números, datas e valores monetários sejam exibidos corretamente em cada localidade.
Configurando numberFormats
Defina formatos numéricos nomeados por localidade na opção numberFormats de createI18n. Cada formato nomeado é um objeto de opções de Intl.NumberFormat.
const i18n = createI18n({
locale: "en",
numberFormats: {
en: {
currency: { style: "currency", currency: "USD" },
decimal: { style: "decimal", minimumFractionDigits: 2 },
},
},
})A função n()
Formate um número com n(value, formatName) de useI18n() ou com $n nos modelos. Ela usa o formato nomeado da localidade ativa.
const { n } = useI18n()
n(1234.5, "decimal") // "1,234.50" in enFormatação de moedas
O estilo currency adiciona o símbolo e o agrupamento corretos. O código da moeda na configuração do formato controla qual símbolo será exibido.
const { n } = useI18n()
n(49.99, "currency") // "$49.99" in enSaída monetária conforme a localidade
Adicione o mesmo formato nomeado em cada localidade, com configurações adequadas a ela. Alterar locale modifica automaticamente o agrupamento, os separadores decimais e a posição do símbolo.
numberFormats: {
en: { currency: { style: "currency", currency: "USD" } },
tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)Percentuais
O estilo percent multiplica por 100 e acrescenta um sinal de porcentagem conforme a localidade.
numberFormats: {
en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}
n(0.256, "percent") // "25.6%"Configurando datetimeFormats
A formatação de datas funciona de modo semelhante à de números. Defina formatos nomeados em datetimeFormats, cada um sendo um objeto de opções de Intl.DateTimeFormat.
const i18n = createI18n({
locale: "en",
datetimeFormats: {
en: {
short: { year: "numeric", month: "short", day: "numeric" },
long: { dateStyle: "full", timeStyle: "short" },
},
},
})A função d()
Formate uma data com d(value, formatName) (ou $d nos modelos). Passe um objeto Date ou um registro de data e hora.
const { d } = useI18n()
d(new Date("2026-05-29"), "short") // "May 29, 2026" in enDatas conforme a localidade
Assim como nos números, forneça o formato de data nomeado para cada localidade. A mesma chamada produz uma ordem localizada e nomes de meses localizados quando a localidade muda.
datetimeFormats: {
en: { short: { year: "numeric", month: "short", day: "numeric" } },
tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)Usando auxiliares de formatação nos modelos
Nos modelos, use $n e $d com um valor e o formato nomeado.
<template>
<p>Total: {{ $n(total, "currency") }}</p>
<p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>Opções em linha pontuais
Além dos formatos nomeados, você pode passar um objeto de opções em linha como segundo argumento para uma formatação pontual sem defini-lo na config.
const { n, d } = useI18n()
n(0.5, { style: "percent" }) // "50%"
d(new Date(), { weekday: "long" }) // "Friday"Verificação rápida
Verifique sua compreensão sobre formatação sensível à localidade.
Recapitulação
Você aprendeu sobre formatação sensível à localidade:
- Configure formatos nomeados em
numberFormatsedatetimeFormatspara cada localidade. n(value, name)/$nformata números — estilos decimal, monetário e de porcentagem.d(value, name)/$dformata datas.- Alterar a
localemuda automaticamente o agrupamento, os separadores decimais, os símbolos e a ordem das datas. - Você também pode passar um objeto de opções em linha para uma formatação pontual.
Perguntas Frequentes
A aula “Formatação de números, datas e moedas” é grátis?
Sim — o texto completo de “Formatação de números, datas e moedas” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Formatação de números, datas e moedas”?
n() para números, d() para datas, formatos de data e hora e numberFormats por localidade. Você pratica Vue 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 Vue Academy?
Nenhuma experiência prévia é necessária. Vue 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 4 de 4.
Quanto tempo leva a aula “Formatação de números, datas e moedas”?
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 Vue Academy?
Sim. Cada aula de Vue 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
- Configuração do vue-i18n e arquivos de mensagens
- Composable useI18n e função t()
- Pluralização e mensagens vinculadas
- Formatação de números, datas e moedas