Mari kita bincangkan tentang kaedah penukaran bersama parameter URL dan objek JS

Dalam proses pembangunan bahagian hadapan, kami sering menghadapi situasi di mana parameter URL dan objek dalam JavaScript perlu ditukar kepada satu sama lain. Sebagai contoh, apabila kita perlu menggunakan parameter pertanyaan URL untuk mengawal tingkah laku halaman, kita perlu menghuraikan parameter URL ke dalam objek dalam JavaScript untuk operasi atau apabila kita perlu menghantar beberapa data pada halaman ke pelayan, Kami perlukan untuk menukar objek kepada parameter URL untuk permintaan.

Artikel ini akan memperkenalkan kaedah penukaran bersama antara parameter URL dan objek dalam JavaScript dan memberikan beberapa contoh kod praktikal.

1. Tukar parameter URL kepada objek JavaScript

Untuk menukar parameter URL kepada objek JavaScript, kita perlu menghuraikan parameter URL terlebih dahulu ke dalam rentetan, dan kemudian menghuraikannya menjadi objek.

1.1 Menghuraikan parameter URL sebagai rentetan

Kita boleh menggunakan kaedah window.location.search dalam JavaScript untuk mendapatkan parameter pertanyaan dalam URL halaman semasa. Rentetan yang dikembalikan oleh kaedah ini mengandungi segala-galanya selepas ? dalam URL, tetapi tidak termasuk # dan parameter utama yang mengikutinya.

Berikut ialah contoh kod untuk mendapatkan parameter pertanyaan URL halaman semasa:

const queryString = window.location.search;

Jika kami ingin mendapatkan parameter pertanyaan dalam URL halaman lain, kami boleh menggunakan new URL(urlString).search kaedah, yang perlu dihuraikan Hanya masukkan URL. Contohnya:

const url = "https://example.com/page/?name=John&age=20";
const queryString = new URL(url).search; // 返回"?name=John&age=20"

1.2 Menghuraikan parameter pertanyaan ke dalam objek

Seterusnya, kita perlu menghuraikan rentetan parameter pertanyaan ke dalam objek dalam JavaScript. Kami boleh menulis fungsi penghuraian secara manual, tetapi disyorkan untuk menggunakan pustaka pihak ketiga query-string, yang menyediakan beberapa kaedah penghuraian yang mudah.

Pertama, kita perlu menggunakan npm atau yarn untuk menambah perpustakaan query-string pada projek:

npm install query-string --save
# 或者
yarn add query-string

Kemudian kita boleh menggunakan kaedah parse yang disediakan dalam perpustakaan untuk menambah Rentetan parameter pertanyaan URL ditukar kepada objek. Contohnya:

import queryString from 'query-string';

const values = queryString.parse(queryString);

Antaranya, values ialah objek yang dihuraikan. Contohnya, jika queryString ialah "?name=John&age=20", maka values ialah {name: "John", age: "20"}.

2. Tukar objek JavaScript kepada parameter URL

Apabila kita perlu menukar objek dalam JavaScript kepada parameter URL, kita perlu menukar setiap pasangan nilai kunci dalam objek Concatenate kepada membentuk rentetan parameter pertanyaan URL.

2.1 Tukar objek kepada rentetan

Kita boleh menulis fungsi penukaran secara manual, mula-mula melelang melalui semua pasangan nilai kunci dalam objek, tukarkannya ke dalam format "key=value", dan kemudian gunakan simbol "&" untuk menyambung. Contohnya:

function toQueryString(obj) {
  const parts = [];
  
  for (const [key, value] of Object.entries(obj)) {
    parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
  }
  
  return parts.join('&');
}

const values = {
  name: "John",
  age: 20
};

const queryString = toQueryString(values);
// 返回 "name=John&age=20"

Perhatikan bahawa kami menggunakan kaedah encodeURIComponent apabila mengekod setiap pasangan nilai kunci ke dalam rentetan. Kaedah ini boleh mengekod aksara khas dalam rentetan untuk mengelakkan parameter pertanyaan URL yang tidak sah. Sebagai contoh, jika pasangan nilai kunci mengandungi aksara khas "?", ia akan ditukar kepada rentetan yang dikodkan seperti "%3F".

2.2 Tambahkan rentetan pada URL

Sekarang kita telah menukar objek JavaScript menjadi rentetan, tugas seterusnya ialah menambahkannya pada URL.

Jika kami mahu mengubah suai terus parameter pertanyaan dalam URL tetingkap semasa, kami boleh menggunakan atribut window.location.search untuk mengubah suainya. Contohnya:

const queryString = toQueryString(values);
window.location.search = queryString;

Jika kita ingin membina URL baharu dan melompat ke arahnya, kita boleh menggunakan atribut window.location.href atau kaedah window.location.replace. Sebagai contoh:

const queryString = toQueryString(values);
const url = `https://example.com/page/?${queryString}`;
window.location.href = url;
// 或者
window.location.replace(url);

Ambil perhatian bahawa di sini kita perlu menyambung URL lengkap itu sendiri dan tidak boleh menggunakan window.location.search begitu sahaja. Oleh kerana atribut search hanya akan mengembalikan bahagian parameter pertanyaan pada URL semasa, kami juga perlu menggabungkan nama hos, nama laluan, parameter utama, dsb.

Ringkasan

Artikel ini memperkenalkan kaedah penukaran bersama parameter URL dan objek dalam JavaScript. Kita boleh mendapatkan parameter pertanyaan dalam URL melalui kaedah location.search dan menggunakan perpustakaan query-string untuk menghuraikan rentetan parameter pertanyaan ke dalam objek JavaScript. Sebaliknya, kami juga boleh menulis fungsi pembantu secara manual untuk menukar objek JavaScript menjadi rentetan parameter pertanyaan dan menambahkannya pada URL.

Operasi di atas sangat mudah, tetapi ia sering digunakan dalam pembangunan bahagian hadapan yang sebenar. Saya harap ia dapat membantu pembaca.

Atas ialah kandungan terperinci Mari kita bincangkan tentang kaedah penukaran bersama parameter URL dan objek JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!