Vue Academy · Lekcja

Formatowanie liczb, dat i walut

n() dla liczb, d() dla dat, formaty daty i czasu oraz numberFormats dla poszczególnych lokalizacji.

Formatowanie liczb, dat i walut to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Liczby i daty różnią się zależnie od lokalizacji

W USA zapis 1,000.50 odpowiada zapisowi 1.000,50 w dużej części Europy. Daty i waluty również się różnią. Vue I18n opakowuje przeglądarkowe interfejsy API Intl, dzięki czemu liczby, daty i kwoty są poprawnie formatowane dla każdej lokalizacji.

Konfigurowanie numberFormats

Zdefiniuj nazwane formaty liczb dla każdej lokalizacji w opcji numberFormats funkcji createI18n. Każdy nazwany format jest obiektem opcji Intl.NumberFormat.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

Funkcja n()

Formatuj liczbę za pomocą n(value, formatName) z useI18n() lub za pomocą $n w szablonach. Funkcja używa nazwanego formatu dla aktywnej lokalizacji.

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

Formatowanie walut

Styl currency dodaje właściwy symbol i sposób grupowania cyfr. Kod waluty w konfiguracji formatu określa, który symbol zostanie wyświetlony.

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

Formatowanie walut zależne od lokalizacji

Dodaj ten sam nazwany format dla każdej lokalizacji, używając ustawień odpowiednich dla danego języka. Zmiana locale automatycznie zmienia grupowanie cyfr, separatory dziesiętne i położenie symbolu.

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)

Procenty

Styl percent mnoży wartość przez 100 i dodaje znak procentu zgodnie z lokalizacją.

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

Konfigurowanie datetimeFormats

Formatowanie dat działa podobnie jak formatowanie liczb. Zdefiniuj nazwane formaty w datetimeFormats, z których każdy jest obiektem opcji Intl.DateTimeFormat.

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

Funkcja d()

Formatuj obiekt Date za pomocą d(value, formatName) (lub $d w szablonach). Przekaż obiekt Date albo znacznik czasu.

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

Daty zależne od lokalizacji

Tak jak w przypadku liczb, podaj nazwany format daty dla każdej lokalizacji. To samo wywołanie zwróci lokalną kolejność elementów oraz nazwy miesięcy po zmianie lokalizacji.

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)

Używanie pomocników formatowania w szablonach

W szablonach używaj $n i $d, przekazując wartość oraz nazwany format.

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

Jednorazowe opcje inline

Oprócz nazwanych formatów można przekazać obiekt opcji inline jako drugi argument, aby zastosować jednorazowy format bez definiowania go w konfiguracji.

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat formatowania uwzględniającego ustawienia regionalne.

Podsumowanie

Nauczono się formatowania uwzględniającego ustawienia regionalne:

Konfiguruj nazwane formaty dla każdego ustawienia regionalnego w sekcjach numberFormats i datetimeFormats.
n(value, name) / $n formatuje liczby — w stylu dziesiętnym, walutowym lub procentowym.
d(value, name) / $d formatuje daty.
Zmiana locale automatycznie zmienia sposób grupowania cyfr, separatory dziesiętne, symbole i kolejność elementów daty.
Można także przekazać obiekt opcji inline do jednorazowego formatowania.

Często zadawane pytania

Czy lekcja „Formatowanie liczb, dat i walut” jest bezpłatna?

Tak — pełny tekst „Formatowanie liczb, dat i walut” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Formatowanie liczb, dat i walut”?

n() dla liczb, d() dla dat, formaty daty i czasu oraz numberFormats dla poszczególnych lokalizacji. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Formatowanie liczb, dat i walut”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja vue-i18n i pliki komunikatów
Composable useI18n i funkcja t()
Liczba mnoga i komunikaty powiązane
Formatowanie liczb, dat i walut

← Powrót do Vue Academy