Sebagai pengembang front-end, kita sering kali perlu mengoperasikan dan memproses URL. Hal yang paling umum adalah mendapatkan nilai parameter yang dibawa dalam tautan URL. Teman-teman yang menggunakan pengembangan kerangka kerja mungkin menganggap ini sangat sederhana, karena kerangka kerja tersebut menyediakan banyak metode bagi kita untuk dengan mudah mendapatkan parameter yang dibawa oleh tautan URL. Namun terkadang kita tidak bisa mengandalkan framework dan perlu menggunakan JS asli untuk mendapatkan parameter. Ini juga merupakan pertanyaan yang sering ditemui dalam wawancara. Hari ini kita akan merobek kode dengan tangan dan menggunakan JS asli untuk mendapatkan nilai parameter tautan URL.
Ada beberapa cara untuk mendapatkan parameter tautan URL menggunakan JS asli. Hari ini kami akan menjelaskan yang umum secara bergantian:
menggunakan pencocokan reguler,
menggunakan metode bawaan tag,
menggunakan metode split,
menggunakan URLSearchParams, menggunakan URLSearchParams. metode
Ini adalah metode yang sangat standar. Poin kuncinya adalah kita perlu memahami ekspresi reguler.
Kodenya adalah sebagai berikut:
<skrip>
//Gunakan ekspresi reguler let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // Mengembalikan fungsi objek parameter queryURLParams(url) {
let pattern = /(w+)=(w+)/ig; //Definisikan ekspresi reguler let parames = {}; //Definisikan objek parameter url.replace(pattern, ($, $1, $2) => {
parameter[$1] = $2;
});
parameter pengembalian;
}
konsol.log(queryURLParams(url))
</script> Fokus kode di atas adalah definisi ekspresi reguler dan penggunaan metode penggantian, di antaranya
1, dan $2 masing-masing mewakili nama=gajah, nama, gajah, dan seterusnya. Anda dapat mempelajarinya sendiri untuk penggunaan replace yang lebih detail dikombinasikan dengan ekspresi reguler.
Efek realisasi:
jarang digunakan oleh orang-orang, karena bagaimanapun juga memiliki sedikit makna teknologi hitam. Prinsip utamanya adalah menggunakan tag a untuk mendapatkan beberapa atribut bawaan, seperti href, hash, search, dan atribut lainnya.
Kodenya adalah sebagai berikut:
<skrip>
biarkan URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
fungsi queryURLParams(url) {
// 1. Buat tag let link = document.createElement('a');
tautan.href = url;
let searchUrl = link.search.substr(1); // Dapatkan string setelah tanda tanya let hashUrl = link.hash.substr(1); // Dapatkan nilai setelah # let obj = {}; objek/ / 2. Simpan hashUrl di objek? obj['HASH'] = hashUrl : null; // #Apakah ada nilai di balik let list = searchUrl.split("&");
for (misalkan i = 0; i < daftar.panjang; i++) {
biarkan arr = daftar[i].split("=");
obj[arr[0]] = arr[1];
}
mengembalikan objek;
}
konsol.log(queryURLParams(URL))
</script> Pada kode di atas, tag a terlebih dahulu dibuat, dan kemudian setiap bagian dari url dapat diperoleh berdasarkan atribut dari tag a. Ini sebenarnya agak mirip dengan lompatan perutean Vue untuk mendapatkan parameter.
Efek realisasi:
Metode ini memanfaatkan fakta bahwa split dapat membagi string menjadi array berdasarkan karakter tertentu, dan dengan cerdik membagi setiap parameter.
Kodenya adalah sebagai berikut:
<skrip>
biarkan URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
fungsi queryURLParams(URL) {
// const url = location.search; // Dalam proyek, Anda bisa langsung mendapatkan string setelah karakter "?" di url melalui metode pencarian let url = URL.split("?")[1];
let obj = {}; // Deklarasikan objek parameter let arr = url.split("&"); // Bagi menjadi array dengan ampersand for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("="); // Membagi menjadi beberapa array dengan "=" obj[arrNew[0]] = arrNew[1];
}
mengembalikan objek;
}
konsol.log(queryURLParams(URL))
</script> Jika kode unggahan digunakan dalam proyek sebenarnya, Anda dapat langsung menggunakan location.search untuk mendapatkan string setelah "?". Untuk kenyamanan demonstrasi, split digunakan untuk membagi yang berikut ini.
Efek realisasi:
Metode URLSearchParams memungkinkan kita memperoleh parameter URL dengan sangat mudah, tetapi ada masalah kompatibilitas tertentu. Situs web resmi menjelaskannya sebagai berikut:
Antarmuka URLSearchParams mendefinisikan beberapa metode praktis untuk memproses string kueri URL.
Antarmuka ini menyediakan metode khusus bagi kami untuk memproses parameter URL. Di sini kami hanya memperkenalkan cara mendapatkan nilai parameter URL. Untuk penggunaan lebih detail, Anda dapat merujuk ke situs resminya.
Kodenya adalah sebagai berikut:
<skrip>
biarkan URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
fungsi queryURLParams(URL) {
biarkan url = URL.split("?")[1];
const urlSearchParams = URLSearchParams baru(url);
const params = Objek.fromEntries(urlSearchParams.entries());
kembalikan param
}
konsol.log(queryURLParams(URL))
</script> Di sini pada dasarnya kita hanya menggunakan dua baris kode utama untuk mengimplementasikan penguraian parameter. Perlu diperhatikan bahwa urlSearchParams.entries() mengembalikan iterator protokol iterasi, jadi kita perlu menggunakan metode Object.fromEntries() untuk mengonversi daftar pasangan nilai kunci menjadi objek.
Mengenai protokol iterasi, Anda dapat merujuk ke situs web resmi:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
untuk mencapai efek:
kesesuaian:
Anda dapat melihat bahwa antarmuka kami tidak kompatibel dengan IE, sumber segala kejahatan.
Empat metode diperkenalkan di sini untuk merealisasikan penguraian nilai parameter tautan URL. Diantaranya, yang paling banyak digunakan adalah metode pemisahan. Sebagai bintang yang sedang naik daun, urlSearchParams secara bertahap dikenali oleh semua orang, dan ada banyak cara untuk membuatnya kompatibel dengan IE.
[Tutorial video terkait yang direkomendasikan: web front-end]
Di atas adalah bagaimana cara mendapatkan parameter URL dalam JavaScript? Untuk penjelasan detail mengenai 4 metode umum tersebut, harap perhatikan artikel terkait lainnya di website PHP Mandarin untuk informasi lebih lanjut!
