programming javascript

Chuyển đổi url thành mảng javascript

Tham số URL [còn được gọi là tham số chuỗi truy vấn hoặc biến URL] được sử dụng để gửi một lượng nhỏ dữ liệu từ trang này sang trang khác hoặc từ máy khách đến máy chủ thông qua một URL. Chúng có thể chứa tất cả các loại thông tin hữu ích, chẳng hạn như truy vấn tìm kiếm, giới thiệu liên kết, thông tin sản phẩm, tùy chọn người dùng, v.v.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách phân tích và thao tác các tham số URL bằng JavaScript

Nhận thông số URL

Trong các trình duyệt hiện đại, điều này đã trở nên dễ dàng hơn rất nhiều nhờ vào giao diện URLSearchParams. Điều này xác định một loạt các phương thức tiện ích để làm việc với chuỗi truy vấn của một URL

Giả sử rằng URL của chúng tôi là

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

0, chúng tôi có thể lấy chuỗi truy vấn bằng cách sử dụng

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

const queryString = window.location.search;
console.log[queryString];
// ?product=shirt&color=blue&newuser&size=m

Sau đó, chúng tôi có thể phân tích cú pháp các tham số của chuỗi truy vấn bằng cách sử dụng

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

const urlParams = new URLSearchParams[queryString];

Sau đó, chúng tôi gọi bất kỳ phương thức nào của nó trên kết quả

Ví dụ:

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

3 sẽ trả về giá trị đầu tiên được liên kết với tham số tìm kiếm đã cho

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

Các phương pháp hữu ích khác

Kiểm tra sự hiện diện của một tham số

Bạn có thể sử dụng

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

4 để kiểm tra xem một tham số nào đó có tồn tại hay không

________số 8

Nhận tất cả các giá trị của tham số

Bạn có thể sử dụng

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

5 để trả về tất cả các giá trị được liên kết với một tham số cụ thể

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

Lặp lại các tham số

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

2 cũng cung cấp một số phương thức lặp

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

7 quen thuộc, cho phép bạn lặp qua các khóa, giá trị và mục nhập của nó

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

Hỗ trợ trình duyệt

Tại thời điểm viết bài, nó được hỗ trợ trong tất cả các trình duyệt chính

Có sẵn một polyfill nếu bạn phải hỗ trợ các trình duyệt cũ như Internet Explorer. Hoặc, bạn có thể làm theo phần còn lại của hướng dẫn này và tìm hiểu cách cuộn của riêng bạn

Cuộn chức năng phân tích chuỗi truy vấn của riêng bạn

Hãy ở lại với URL mà chúng tôi đã sử dụng trong phần trước

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

Đây là một chức năng cung cấp cho bạn tất cả các tham số URL dưới dạng một đối tượng gọn gàng

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

Bạn sẽ sớm thấy cách thức hoạt động của tính năng này, nhưng trước tiên, đây là một số ví dụ sử dụng

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

Và đây là một bản demo để bạn chơi xung quanh

Xem Bút rQGWpP của SitePoint [@SitePoint] trên CodePen

Những điều cần biết trước khi sử dụng chức năng này

Hàm của chúng tôi giả sử các tham số được phân tách bằng ký tự

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

9, như được chỉ ra trong. Tuy nhiên, định dạng tham số URL nói chung là , vì vậy đôi khi bạn có thể thấy

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

0 hoặc

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

1 là

Hàm của chúng ta vẫn hoạt động nếu một tham số không có dấu bằng hoặc nếu nó có dấu bằng nhưng không có giá trị
Các giá trị của các tham số trùng lặp được đưa vào một mảng

Nếu bạn chỉ muốn một chức năng mà bạn có thể đưa vào mã của mình, bạn đã hoàn thành ngay bây giờ. Nếu bạn muốn hiểu chức năng này hoạt động như thế nào, hãy đọc tiếp

Phần sau đây giả sử bạn biết một số JavaScript, bao gồm hàm, đối tượng và mảng. Nếu bạn cần xem lại, hãy xem tài liệu tham khảo MDN JavaScript

Cách chức năng hoạt động

Nhìn chung, hàm lấy chuỗi truy vấn của URL [phần sau

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

2 và trước

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

3] và đưa ra dữ liệu trong một đối tượng gọn gàng

Đầu tiên, dòng này cho biết, nếu chúng tôi đã chỉ định một URL, hãy lấy mọi thứ sau dấu chấm hỏi, nhưng nếu không, chỉ cần sử dụng URL của cửa sổ

const queryString = window.location.search;
console.log[queryString];
// ?product=shirt&color=blue&newuser&size=m

Tiếp theo, chúng tôi sẽ tạo một đối tượng để lưu trữ các tham số của chúng tôi

const urlParams = new URLSearchParams[queryString];

Nếu chuỗi truy vấn tồn tại, chúng tôi sẽ bắt đầu phân tích cú pháp chuỗi đó. Trước tiên, chúng tôi phải đảm bảo loại bỏ phần bắt đầu từ

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

3, vì nó không phải là một phần của chuỗi truy vấn

const urlParams = new URLSearchParams[queryString];

Bây giờ chúng ta có thể chia chuỗi truy vấn thành các phần cấu thành của nó

const urlParams = new URLSearchParams[queryString];

Điều đó sẽ cho chúng ta một mảng trông như thế này

const urlParams = new URLSearchParams[queryString];

Tiếp theo, chúng tôi sẽ lặp qua mảng này và chia từng mục thành một khóa và một giá trị, chúng tôi sẽ sớm đưa vào đối tượng của mình

const urlParams = new URLSearchParams[queryString];

Hãy gán khóa và giá trị cho các biến riêng lẻ. Nếu không có giá trị tham số, chúng tôi sẽ đặt giá trị đó thành

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

5 để cho biết rằng tên tham số tồn tại. Vui lòng thay đổi điều này tùy thuộc vào trường hợp sử dụng của bạn

const urlParams = new URLSearchParams[queryString];

Theo tùy chọn, bạn có thể đặt tất cả tên và giá trị tham số thành chữ thường. Bằng cách đó, bạn có thể tránh được tình huống ai đó gửi lưu lượng truy cập đến một URL có

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

6 thay vì

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

7 và tập lệnh của bạn bị hỏng. [Tôi đã thấy điều này xảy ra. ] Tuy nhiên, nếu chuỗi truy vấn của bạn cần phân biệt chữ hoa chữ thường, vui lòng bỏ qua phần này

const urlParams = new URLSearchParams[queryString];

Tiếp theo, chúng ta cần xử lý các loại đầu vào khác nhau mà chúng ta có thể nhận được trong

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

8. Đây có thể là một mảng được lập chỉ mục, một mảng không được lập chỉ mục hoặc một chuỗi thông thường

Nếu đó là một mảng được lập chỉ mục, chúng tôi muốn

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

9 tương ứng là một mảng, với giá trị được chèn vào đúng vị trí. Nếu đó là một mảng không được lập chỉ mục, chúng tôi muốn

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

9 tương ứng là một mảng với phần tử được đẩy vào nó. Nếu đó là một chuỗi, chúng tôi muốn tạo một thuộc tính thông thường trên đối tượng và gán

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

9 cho nó, trừ khi thuộc tính đó đã tồn tại, trong trường hợp đó, chúng tôi muốn chuyển đổi

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

9 hiện có thành một mảng và đẩy

console.log[urlParams.has['product']];
// true

console.log[urlParams.has['paymentmethod']];
// false

9 sắp tới vào đó

Để minh họa điều này, đây là một số đầu vào mẫu, với đầu ra mà chúng ta mong đợi

const urlParams = new URLSearchParams[queryString];

Và đây là mã để thực hiện chức năng

const urlParams = new URLSearchParams[queryString];

Cuối cùng, chúng tôi trả về đối tượng của mình với các tham số và giá trị

Nếu URL của bạn có bất kỳ ký tự đặc biệt nào được mã hóa như dấu cách [được mã hóa thành

const product = urlParams.get['product']
console.log[product];
// shirt

const color = urlParams.get['color']
console.log[color];
// blue

const newUser = urlParams.get['newuser']
console.log[newUser];
// empty string

04], bạn cũng có thể giải mã chúng để nhận giá trị ban đầu như thế này

const urlParams = new URLSearchParams[queryString];

Chỉ cần cẩn thận không giải mã thứ gì đó đã được giải mã, nếu không, tập lệnh của bạn sẽ bị lỗi, đặc biệt nếu có liên quan đến phần trăm

Dù sao, xin chúc mừng. Bây giờ bạn đã biết cách lấy tham số URL và hy vọng bạn đã học được một số thủ thuật khác trong quá trình thực hiện

Phần kết luận

Mã trong bài viết này hoạt động cho các trường hợp sử dụng phổ biến nhất mà bạn sẽ nhận được tham số truy vấn URL. Nếu bạn đang làm việc với bất kỳ trường hợp cạnh nào, chẳng hạn như dấu tách không phổ biến hoặc định dạng đặc biệt, thì hãy đảm bảo kiểm tra và điều chỉnh cho phù hợp

Nếu bạn muốn làm nhiều hơn với URL, có sẵn các thư viện cụ thể, chẳng hạn như chuỗi truy vấn và URI trung gian. js. Nhưng vì về cơ bản nó là thao tác chuỗi, nên thường chỉ sử dụng JavaScript đơn giản. Cho dù bạn sử dụng mã của riêng mình hay sử dụng thư viện, hãy nhớ kiểm tra mọi thứ và đảm bảo rằng nó hoạt động cho các trường hợp sử dụng của bạn

Nếu bạn thích chơi với chuỗi, hãy xem các bài đăng của chúng tôi về tách chuỗi thành chuỗi con, chuyển đổi chuỗi thành số và chuyển đổi số thành chuỗi và thứ tự. Để có thêm kiến thức chuyên sâu về JavaScript, hãy đọc cuốn sách JavaScript của chúng tôi. Tập làm Ninja, Phiên bản 2

Chia sẻ bài viết này

Yaphi Berhanu

Yaphi Berhanu là một nhà phát triển web thích giúp mọi người nâng cao kỹ năng viết mã của họ. Anh ấy viết mẹo và thủ thuật tại http. //mã bước đơn giản. com. Theo ý kiến hoàn toàn không thiên vị của mình, anh ấy đề nghị kiểm tra nó

Làm cách nào để chuyển đổi URL thành đối tượng trong JavaScript?

Sử dụng hàm tạo URLSearchParams để chuyển đổi chuỗi truy vấn thành đối tượng , e. g. const obj = new URLSearchParams['? page=3&filter=js']. Hàm tạo trả về một thể hiện đối tượng mà từ đó chúng ta có thể truy cập các tham số chuỗi truy vấn bằng phương thức get[], e. g. đối tượng. lấy ['trang'].

Làm cách nào để tách chuỗi URL trong JavaScript?

var newURL="http. //www. ví dụ. com/chỉ mục. html/homePage/aboutus/"; bảng điều khiển. nhật ký [URL mới]; . var splitURL=newURL. toString[]. split["/"]; bảng điều khiển.

Làm cách nào để chuyển đổi URL thành chuỗi trong JavaScript?

toString[] URL. phương thức chuỗi ký tự toString[] trả về một chuỗi chứa toàn bộ URL. Đây thực sự là phiên bản chỉ đọc của URL.

Làm cách nào để chuyển các giá trị mảng trong URL?

Bạn có thể sử dụng hàm serialize[] và urlencode PHP tích hợp để truyền một mảng dưới dạng tham số URL . Hàm serialize[] sẽ trả về một chuỗi bit cho đầu vào đã cho và urlencode sẽ mã hóa lại các giá trị cũng như các ký tự đặc biệt có sẵn trong đó.