Alat pembangun · URL pengekod & penyahkod
Perkara yang dikodkan oleh pembina URL untuk anda: set pengekodan peratus pelayar
· Bagaimana ia berfungsi
pengekodan url javascript whatwg web-apis
URL API secara senyap peratus mengekod beberapa aksara dan meninggalkan yang lain sahaja, bergantung pada bahagian mana URL mereka sampai. Siaran ini menerangkan set pengekodan WHATWG dan cara meramalkan output.
Ruang yang menjadi %20 dan | yang kekal — kes konkrit di mana URL() baharu mengekod sebahagian laluan
Apabila URL("https://example.com/hello world") baharu dijalankan, ruang menjadi %20 secara senyap. Tetapi baharu URL("https://example.com/hello|world") membiarkan paip tidak disentuh. Perbezaan ini bukan rawak. WHATWG URL Standard mentakrifkan set aksara berasingan untuk mengekod bagi setiap komponen URL: laluan, pertanyaan, pemahaman setiap serpihan mempunyai peraturan sendiri, dan maklumat serpihan ini. pembina akan lakukan.
Ruang memerlukan pengekodan peratus kerana ia tidak selamat atas HTTP dan merosakkan kebolehbacaan. Paipnya berbeza: bukan watak terpelihara yang memisahkan struktur, jadi pelayar meninggalkannya begitu sahaja. Garis antara keselamatan dan kebolehbacaan dilukis oleh WHATWG, bukan tekaan. Menguji "hello world" menunjukkan pengekodan; menguji "hello|world" mendedahkan sempadan bagi setiap bahagian URL.
Satu URL, beberapa set pengekodan — laluan, pertanyaan, serpihan dan maklumat pengguna masing-masing mempunyai senarai aksara mereka sendiri untuk pelepasan aksara
Satu URL mengandungi berbilang wilayah, setiap satu dengan peraturan pengekodannya sendiri. Laluan mengikuti satu set, bertanya satu lagi, pecahkan satu pertiga, maklumat pengguna satu perempat. Ruang menjadi %20 dalam laluan dan pertanyaan. Tanda yang sama kekal dalam pertanyaan, di mana ia memisahkan kunci dan nilai, tetapi encodeURIComponent menukarnya kepada %3D. Pembina URL mengetahui konteksnya dan menggunakan peraturan yang betul untuk setiap bahagian.
Set pengekodan adalah tepat dan kecil. Path mempunyai senarai wataknya sendiri; pertanyaan mempunyai senarai yang serupa tetapi berbeza. Ini mencerminkan watak mana yang mempunyai makna struktur. Garis miring ke hadapan membahagikan segmen laluan, jadi encodeURIComponent mengekodnya sebagai %2F. Dalam serpihan, garis miring ke hadapan boleh wujud tanpa memecahkan apa-apa. Memahami peraturan WHATWG bermakna meramalkan output tanpa menjalankan kod.
Mengapa pengekodan peratus adalah sehala: perkara yang kekal dikodkan kekal seperti itu
Pembina URL melakukan normalisasi sehala. Hantar "%20" kepada URL baharu dan ia menghasilkan %20 tidak berubah. Pembina mengiktirafnya sebagai telah dikodkan dan membiarkannya sahaja. Inilah sebabnya mengapa pengekodan dua kali penting: mengekod sekali, melalui pembina, dan pengekodan melekat. Pembina tidak menyahkod, mentafsir semula, dan mengekod semula; ia membaca ke hadapan.
Sifat sehala ini mempengaruhi aplikasi yang mempercayai URL.href sebagai berkanun. Jika anda menggabungkan input pengguna dengan laluan anda, input akan dinormalkan tetapi tidak dinyahkodkan. Nilai seperti "my+file" kekal seperti sedia ada atau menjadi "my%2Bfile" dalam beberapa konteks. Kod kemudian menggunakan decodeURIComponent mungkin dibaca tambah sebagai ruang jika daripada data borang. Pembina menormalkan sekali; selepas itu, nilai anda ditetapkan.
Contoh yang berjaya: menghantar rentetan berantakan yang sama melalui URL() baharu dan membaca href, nama laluan dan searchParams — tiga pandangan berbeza
Ambil "hello world&foo=bar|test#anchor" dan letakkannya melalui URL baharu dengan komponen yang berbeza. Ruang menjadi %20 di mana-mana sahaja. Ampersand dalam laluan kekal (tiada makna struktur di sana), tetapi dalam pertanyaan ia juga kekal (memisahkan parameter, jadi menormalkan akan kehilangan sempadan antara "q=" dan "foo=bar"). Paip dan cincang berkelakuan berbeza mengikut lokasi.
Membaca href, nama laluan dan searchParams menunjukkan tiga pandangan berbeza. nama laluan menunjukkan laluan yang dikodkan tanpa skema, hos atau pertanyaan. searchParams memberikan parameter yang dinyahkod, jadi "hello+world" daripada data borang menjadi ruang. Sifat carian mengekalkan rentetan literal. href menunjukkan URL ternormal lengkap. Ini wujud bersama pada satu objek; yang hendak digunakan bergantung pada langkah seterusnya.
URLSearchParams dan peraturan pengekodan borang — sebab ia menghasilkan + untuk ruang manakala nama laluan menghasilkan %20
URLSearchParams menggunakan pengekodan borang: ruang menjadi tambah, bukan %20. URLSearchParams baharu({q: "hello world"}) menghasilkan "q=hello+world", bukan "q=hello%20world". Ini ialah peraturan aplikasi/x-www-form-urlencoded sejarah. Tetapi jika anda menghantar rentetan ini sebagai pertanyaan mentah kepada URL baharu, tambah kekal tambah; sahaja URLSearchParams yang menyahkodnya sebagai ruang. Pembina setia kepada apa yang dilihatnya.
Perbezaan tanda tambah ini menyebabkan pepijat biasa. URL daripada bar alamat menggunakan %20 untuk ruang. Data borang menggunakan tambah. Jika anda menyahkod dengan decodeURIComponent (yang berbunyi tambah secara literal) dan bukannya URLSearchParams.get, ruang menjadi aksara tambah. Pengekod & penyahkod URL menunjukkan kedua-duanya: tampal "hello+world" dan bandingkan mod komponen dan borang untuk melihat tempat ruang muncul.
Membandingkan dengan encodeURI — di mana kedua-duanya bersetuju dan di mana mereka menyimpang
Pembina URL dan encodeURIComponent ialah alat yang berbeza. encodeURIComponent mengekod hampir semua perkara kecuali huruf, digit dan -_ . ! ~ * ' ( ). Ia tidak menganggap konteks. Pembina URL menghuraikan URL sebenar dan menggunakan peraturan WHATWG bagi setiap komponen. encodeURIComponent menukar "hello/world" kepada "hello%2Fworld"; URL baharu melihat garis miring sebagai pemisah laluan. Input yang sama, output yang berbeza.
Gunakan encodeURIComponent apabila membina URL dengan menggabungkan kepingan. Gunakan URLSearchParams atau pembina URL untuk URL lengkap atau separa. Jangan gunakan encodeURIComponent secara keseluruhan URL; anda akan merosakkan skema. Bandingkan hasilnya dengan niat. Pelayar menguatkuasakan URL pendapat struktur dan URL baharu melaksanakannya. Pengekod & penyahkod URL menunjukkan kedua-dua pandangan sebelah menyebelah.
Perkara ini tidak meliputi — penghuraian hos, IDNA dan skim khas berbanding bukan khas
Standard WHATWG URL ialah sumber kebenaran, walaupun membacanya memerlukan kesabaran. Set pengekodan ditakrifkan dalam serpihan algoritma, bukan senarai biasa. Dalam amalan, memahami prinsip lebih penting daripada menghafal set. Laluan membenarkan lebih banyak aksara (garis miring adalah struktur); pertanyaan mempunyai peraturannya sendiri; serpihan mempunyai sekatan paling sedikit (dikendalikan oleh pihak klien, tidak pernah dihantar ke pelayan). Setiap komponen mempunyai peraturan sendiri; mengetahui perkara ini memberitahu anda di mana hendak mencari.
Normalisasi dan pengesahan adalah sempadan yang berbeza. Pembina menormalkan: membersihkan pengekodan peratus, menggunakan peraturan komponen, memberikan bentuk kanonik. Ia tidak mengesahkan: membuang aksara tidak sah, tetapi hos kosong diterima. Pembina tegas tentang format tetapi lembut tentang tafsiran. Untuk pematuhan spesifikasi yang tepat, baca bahagian bait berkod peratusan WHATWG. Untuk membina setiap hari, gunakan URLSearchParams, URL API dan contoh sebenar.
Bawa pulang: penghurai mempunyai pendapat — cara pengekod & penyahkod URL menunjukkan kepada anda pengekodan peratus biasa nilai atau alamat supaya anda boleh membandingkannya dengan apa yang dihasilkan oleh pelayar
Ciri WHATWG yang tidak disokong di sini termasuk penghuraian hos dengan penukaran IDNA (nama domain antarabangsa kepada ASCII) dan pengendalian skim khas berbanding bukan khas. Fail: URL menggunakan kuasa dwi-slash; data: URL tidak. Pembina menguatkuasakan peraturan ini. Menukar nama hos dan menentukan status istimewa tergolong dalam pembacaan spesifikasi, bukan pengekodan peratus. Ini penting apabila membina URL merentas skema yang berbeza.
Uji pembinaan URL anda dengan membandingkan tafsiran pelayar dengan jangkaan. Bina dengan URL baharu, baca sifat yang penting: href untuk borang lengkap, nama laluan untuk laluan, cari pertanyaan mentah, searchParams untuk dinyahkod. Jika output mengejutkan anda, tampal ke dalam URL pengekod & penyahkod dan ikuti perubahan langkah demi langkah. Alat ini menunjukkan output yang dinormalkan bersama pengekodan mentah, mendedahkan perbezaannya. Memahami set WHATWG bermakna memahami pilihan pelayar dan cara bekerja dengannya.