PricingLoginStart free
Vue Academy · Pelajaran

Pemformatan Nombor, Tarikh dan Mata Wang

n() untuk nombor, d() untuk tarikh, format tarikh masa, numberFormats mengikut locale.

Pelajaran 4 daripada 413 langkah

Pemformatan Nombor, Tarikh dan Mata Wang ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Nombor dan Tarikh Berbeza Mengikut Tempat

1,000.50 di US ialah 1.000,50 di kebanyakan kawasan Eropah. Tarikh dan mata wang juga berbeza. Vue I18n membalut API Intl pelayar supaya nombor, tarikh dan wang dipaparkan dengan betul mengikut tempat.

Mengkonfigurasi numberFormats

Tentukan format nombor bernama bagi setiap tempat dalam pilihan numberFormats untuk createI18n. Setiap format bernama ialah objek pilihan Intl.NumberFormat.

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

Fungsi n()

Formatkan nombor dengan n(value, formatName) daripada useI18n(), atau dengan $n dalam templat. Fungsi ini menggunakan format bernama untuk tempat aktif.

const { n } = useI18n()

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

Pemformatan Mata Wang

Gaya currency menambah simbol dan pengumpulan digit yang betul. Kod mata wang dalam konfigurasi format mengawal simbol yang dipaparkan.

const { n } = useI18n()

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

Output Mata Wang Mengikut Tempat

Tambah format bernama yang sama di bawah setiap tempat dengan tetapan yang sesuai untuk tempat tersebut. Menukar locale mengubah pengumpulan digit, tanda perpuluhan dan kedudukan simbol secara automatik.

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)

Peratus

Gaya percent mendarab nilai dengan 100 dan menambah tanda peratus mengikut tempat.

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

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

Mengkonfigurasi datetimeFormats

Pemformatan tarikh menyerupai pemformatan nombor. Tentukan format bernama di bawah datetimeFormats, setiap satunya ialah objek pilihan Intl.DateTimeFormat.

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

Fungsi d()

Formatkan tarikh dengan d(value, formatName) (atau $d dalam templat). Hantar objek Date atau cap masa.

const { d } = useI18n()

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

Tarikh Mengikut Tempat

Seperti nombor, sediakan format tarikh bernama bagi setiap tempat. Panggilan yang sama menghasilkan susunan dan nama bulan setempat apabila tempat 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 Pembantu Format dalam Templat

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

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

Pilihan Sebaris Sekali Guna

Selain format bernama, anda boleh menghantar objek pilihan sebaris sebagai argumen kedua untuk pemformatan sekali guna tanpa mentakrifkannya dalam konfigurasi.

const { n, d } = useI18n()

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

Semakan Pantas

Semak pemahaman anda tentang pemformatan yang peka terhadap lokal.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari pemformatan yang peka terhadap lokal:

  • Konfigurasikan format bernama di bawah numberFormats dan datetimeFormats bagi setiap lokal.
  • n(value, name) / $n memformat nombor — gaya perpuluhan, mata wang dan peratus.
  • d(value, name) / $d memformat tarikh.
  • Menukar locale mengubah pengumpulan digit, tanda perpuluhan, simbol dan susunan tarikh secara automatik.
  • Anda juga boleh menghantar objek pilihan sebaris untuk pemformatan sekali guna.
Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
42
Pelajaran
156
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemformatan Nombor, Tarikh dan Mata Wang” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Pemformatan Nombor, Tarikh dan Mata Wang”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pemformatan Nombor, Tarikh dan Mata Wang”?

n() untuk nombor, d() untuk tarikh, format tarikh masa, numberFormats mengikut locale. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pemformatan Nombor, Tarikh dan Mata Wang” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Persediaan vue-i18n dan Fail Mesej
  2. Komposabel useI18n dan Fungsi t()
  3. Pemaparan Jamak dan Mesej Terpaut
  4. Pemformatan Nombor, Tarikh dan Mata Wang
← Kembali ke Vue Academy