Morioh
Login
CODE VN

CODE VN

1 year ago

Cách lấy giá trị chuỗi truy vấn trong JavaScript

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách lấy các giá trị chuỗi truy vấn trong JavaScript. Chuỗi truy vấn là một khía cạnh cơ bản của phát triển web hiện đại, vì chúng cho phép bạn truyền dữ liệu giữa các trang và thành phần khác nhau trong ứng dụng web của bạn. JavaScript cung cấp một số phương thức để trích xuất các giá trị chuỗi truy vấn và làm việc với chúng một cách hiệu quả. Trong bài viết này, chúng ta sẽ khám phá các kỹ thuật khác nhau để truy xuất các giá trị chuỗi truy vấn trong JavaScript.

  • Phương pháp 1: Sử dụng đối tượng window.location
  • Phương pháp 2: Biểu thức chính quy
  • Phương pháp 3: Sử dụng API URL
  • Phương pháp 4: Thư viện của bên thứ ba

Phương pháp 1: Sử dụng đối tượng window.location

Đối window.location tượng cung cấp thông tin về URL hiện tại của trang. Nó bao gồm searchthuộc tính chứa phần chuỗi truy vấn của URL. Để trích xuất các giá trị cụ thể, bạn có thể sử dụng URLSearchParamsAPI, như minh họa trong ví dụ sau:

// Assuming the URL is "https://example.com/?name=John&age=25"
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

const name = urlParams.get('name'); // "John"
const age = urlParams.get('age'); // "25"

Phương pháp 2: Biểu thức chính quy

Một cách tiếp cận khác để trích xuất các giá trị chuỗi truy vấn là sử dụng các biểu thức chính quy. JavaScript cung cấp match()phương thức cho phép bạn khớp một biểu thức chính quy với một chuỗi và trả về một mảng các giá trị khớp. Ví dụ sau minh họa cách sử dụng biểu thức chính quy để truy xuất các giá trị chuỗi truy vấn:

// Assuming the URL is "https://example.com/?name=John&age=25"
const queryString = window.location.search;
const regex = /[?&]([^=#]+)=([^&#]*)/g;
let match;
const params = {};

while ((match = regex.exec(queryString))) {
  params[match[1]] = decodeURIComponent(match[2]);
}

const name = params['name']; // "John"
const age = params['age']; // "25"

Phương pháp 3: Sử dụng API URL

API URL, được giới thiệu trong các trình duyệt hiện đại, cung cấp một cách thuận tiện để làm việc với các URL. Nó bao gồm một searchParamsthuộc tính, là một thể hiện của URLSearchParamsđối tượng. Đoạn mã sau minh họa cách trích xuất các giá trị chuỗi truy vấn bằng API URL:

// Assuming the URL is "https://example.com/?name=John&age=25"
const url = new URL(window.location.href);
const name = url.searchParams.get('name'); // "John"
const age = url.searchParams.get('age'); // "25"

Phương pháp 4: Thư viện của bên thứ ba

Ngoài các phương thức gốc, còn có nhiều thư viện JavaScript của bên thứ ba có thể đơn giản hóa việc xử lý chuỗi truy vấn. Một số thư viện phổ biến bao gồm qs, query-string, và url-search-params-polyfill. Các thư viện này cung cấp các tính năng bổ sung và tính linh hoạt để làm việc với các giá trị chuỗi truy vấn một cách hiệu quả.

Hãy nhớ rằng, khi xử lý các giá trị chuỗi truy vấn, điều quan trọng là phải xử lý các sự cố mã hóa tiềm ẩn. Sử dụng decodeURIComponent()hàm để giải mã các giá trị được mã hóa URL được truy xuất từ ​​chuỗi truy vấn, đảm bảo xử lý dữ liệu phù hợp.

Mã hóa vui vẻ !!!

1.05 GEEK