PricingLoginStart free
Vue Academy · Pelajaran

Pemformatan Angka, Tanggal, dan Mata Uang

n() untuk angka, d() untuk tanggal, format tanggal-waktu, serta numberFormats per locale.

Pelajaran 4 dari 413 langkah

Pemformatan Angka, Tanggal, dan Mata Uang adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Angka dan Tanggal Berbeda Menurut Lokal

1,000.50 di US ditulis sebagai 1.000,50 di sebagian besar Eropa. Tanggal dan mata uang juga berbeda. Vue I18n membungkus API Intl peramban sehingga angka, tanggal, dan uang ditampilkan dengan benar sesuai lokal.

Mengonfigurasi numberFormats

Tentukan format angka bernama untuk setiap lokal dalam opsi numberFormats pada createI18n. Setiap format bernama merupakan objek opsi Intl.NumberFormat.

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

Fungsi n()

Format angka dengan n(value, formatName) dari useI18n(), atau dengan $n dalam templat. Fungsi ini menggunakan format bernama untuk lokal aktif.

const { n } = useI18n()

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

Pemformatan Mata Uang

Gaya currency menambahkan simbol dan pengelompokan angka yang tepat. Kode mata uang dalam konfigurasi format menentukan simbol yang ditampilkan.

const { n } = useI18n()

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

Keluaran Mata Uang Sesuai Lokal

Tambahkan format bernama yang sama di bawah setiap lokal dengan pengaturan yang sesuai untuk lokal tersebut. Mengganti locale secara otomatis mengubah pengelompokan angka, tanda desimal, dan penempatan simbol.

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)

Persentase

Gaya percent mengalikan nilai dengan 100 dan menambahkan tanda persen sesuai lokal.

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

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

Mengonfigurasi datetimeFormats

Pemformatan tanggal mengikuti pola yang sama seperti angka. Tentukan format bernama di bawah datetimeFormats; masing-masing merupakan objek opsi Intl.DateTimeFormat.

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

Fungsi d()

Format objek Date dengan d(value, formatName) (atau $d dalam templat). Teruskan objek Date atau stempel waktu.

const { d } = useI18n()

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

Tanggal Sesuai Lokal

Sama seperti pada angka, sediakan format tanggal bernama untuk setiap lokal. Pemanggilan yang sama menghasilkan urutan tanggal dan nama bulan yang dilokalkan saat lokal berubah.

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)

Menggunakan Helper Format dalam Templat

Dalam templat, gunakan $n dan $d dengan nilai dan format bernama.

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

Opsi Sebaris Sekali Pakai

Selain format bernama, Anda dapat meneruskan objek opsi sebaris sebagai argumen kedua untuk format sekali pakai tanpa mendefinisikannya di config.

const { n, d } = useI18n()

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

Pemeriksaan Singkat

Periksa pemahaman Anda tentang pemformatan yang mengikuti lokal.

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari pemformatan yang mengikuti lokal:

  • Konfigurasikan format bernama di bawah numberFormats dan datetimeFormats untuk setiap lokal.
  • n(value, name) / $n memformat angka — gaya desimal, mata uang, dan persentase.
  • d(value, name) / $d memformat tanggal.
  • Mengubah locale secara otomatis mengubah pengelompokan angka, tanda desimal, simbol, dan urutan tanggal.
  • Anda juga dapat meneruskan objek opsi sebaris untuk pemformatan sekali pakai.
Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
42
Pelajaran
156
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemformatan Angka, Tanggal, dan Mata Uang” gratis?

Ya — teks lengkap “Pemformatan Angka, Tanggal, dan Mata Uang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemformatan Angka, Tanggal, dan Mata Uang”?

n() untuk angka, d() untuk tanggal, format tanggal-waktu, serta numberFormats per locale. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pemformatan Angka, Tanggal, dan Mata Uang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menyiapkan vue-i18n dan File Pesan
  2. Composable useI18n dan Fungsi t()
  3. Pluralisasi dan Pesan Tertaut
  4. Pemformatan Angka, Tanggal, dan Mata Uang
← Kembali ke Vue Academy