0Pricing
JavaScript Academy · Pelajaran

Keunikan Pemuat ESM, Perbedaan PATH/URL

Resolusikan URL dengan aman, pahami penentu relatif vs polos, dan lihat perbedaan URL berkas dengan URL web. Demo kecil yang dapat dijalankan

Keunikan Pemuat ESM, Perbedaan PATH/URL adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Gambaran besar

Tujuan: Selesaikan jalur dengan aman di berbagai lingkungan.

  • Gunakan konstruktor URL untuk menyelesaikan jalur relatif
  • Pahami penentu relatif dan penentu tanpa awalan
  • Pahami perbedaan file: dan https:
  • Hindari penggabungan string yang rapuh untuk jalur
Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 1

Relatif terhadap basis

new URL(relative, base) menangani bagian jalur dan garis miring dengan benar.

// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 2

Normalisasi dengan ..

Konstruktor tersebut menghapus ../ dengan benar, sehingga Anda tidak memerlukan trik string manual.

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 3

Gambaran URL file:

URL file: menunjuk ke berkas lokal dalam lingkungan seperti Node; peramban tidak dapat membacanya secara langsung tanpa tindakan pengguna.

// You can also work with file: URLs (no actual file I/O here)
const baseFile = "file:///home/user/project/src/";
const file = new URL("./data/sample.txt", baseFile);
console.log("file url:", file.href);
Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 4

Jenis penentu

Pemuatan ESM memperlakukan penentu tanpa awalan secara berbeda dari URL relatif atau absolut. Mengetahui jenisnya akan membantu.

// Tiny helper: categorize a module specifier
function specKind(s) {
  if (typeof s !== "string") return "unknown";
  if (s.startsWith("./") || s.startsWith("../") || s.startsWith("/")) return "relative-or-absolute";
  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("file://")) return "url";
  return "bare"; // like "lodash" or "fs"
}

console.log("kind ./util.js:", specKind("./util.js"));
console.log("kind lodash   :", specKind("lodash"));
console.log("kind https:// :", specKind("https://cdn.site/x.js"));
Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 5

Kebiasaan yang ramah bagi pemula

Kiat:

  • Utamakan URL(relative, base) daripada penggabungan string.
  • Pahami perbedaan penentu tanpa awalan dan penentu relatif.
  • Hindari menganggap berkas tersedia di peramban.
  • Jaga agar jalur tetap singkat dan mudah dibaca oleh pemula.
Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 6

Kuis dasar penyelesaian URL

Pemeriksaan singkat: Buat URL dengan aman.

Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 7

Ringkasan

Ringkasan: Gunakan konstruktor URL untuk menyelesaikan jalur relatif (./, ../), kenali perbedaan penentu tanpa awalan dan penentu relatif, serta ingat bahwa URL file: berbeda dari URL web.

Keunikan Pemuat ESM, Perbedaan PATH/URL — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Keunikan Pemuat ESM, Perbedaan PATH/URL” gratis?

Ya — teks lengkap “Keunikan Pemuat ESM, Perbedaan PATH/URL” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Keunikan Pemuat ESM, Perbedaan PATH/URL”?

Resolusikan URL dengan aman, pahami penentu relatif vs polos, dan lihat perbedaan URL berkas dengan URL web. Demo kecil yang dapat dijalankan Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 2 dari 3.

Berapa lama pelajaran “Keunikan Pemuat ESM, Perbedaan PATH/URL” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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. Global, Ketersediaan fetch, API Berkas/Jaringan
  2. Keunikan Pemuat ESM, Perbedaan PATH/URL
  3. Variabel Lingkungan dan Pola Konfigurasi
← Kembali ke JavaScript Academy