Mẹo Làm cách nào để lấy URL trong JavaScript?

Thủ Thuật về Làm cách nào để lấy URL trong JavaScript? Chi Tiết

Hoàng Đức Anh đang tìm kiếm từ khóa Làm cách nào để lấy URL trong JavaScript? được Cập Nhật vào lúc : 2022-12-19 13:44:03 . Với phương châm chia sẻ Mẹo về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi Read tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Admin lý giải và hướng dẫn lại nha.

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ỏ tài liệu từ trang này sang trang khác hoặc từ máy khách đến sever thông qua một URL. Chúng hoàn toàn có thể chứa tất cả nhiều chủng loại thông tin hữu ích, ví dụ như truy vấn tìm kiếm, ra mắt link, thông tin sản phẩm, tùy chọn người tiêu dùng, v.v.

Nội dung chính Show

Nhận thông số URLCác phương pháp hữu ích khácKiểm tra sự hiện hữu của một tham sốNhận tất cả những giá trị của tham sốLặp lại những tham sốHỗ trợ trình duyệtCuộn hiệu suất cao phân tích chuỗi truy vấn của riêng bạnNhững điều nên phải biết trước khi sử dụng hiệu suất cao nàyCách hiệu suất cao hoạt độngPhần kết luậnChia sẻ nội dung bài viết này

Trong nội dung 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 những tham số URL bằng JavaScript

Nhận thông số URL

Trong những trình duyệt tân tiến, điều này đã trở nên thuận tiện và đơn giản hơn rất nhiều nhờ vào giao diện URLSearchParams. Điều này xác định một loạt những phương thức tiện ích để thao tá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 hoàn toàn có thể lấy chuỗi truy vấn bằng phương pháp 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 1const queryString = window.location.search; console.log(queryString); // ?product=shirt&color=blue&newuser&size=m

Sau đó, chúng tôi hoàn toàn có thể phân tích cú pháp những tham số của chuỗi truy vấn bằng phương pháp 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 2const 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 link với tham số tìm kiếm đã choconst 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 hữu của một tham số

Bạn hoàn toà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ả những giá trị của tham số

Bạn hoàn toà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ả những giá trị được link 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 0

Lặp lại những 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 đáp ứng một số trong những 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, được cho phép bạn lặp qua những 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 3

Hỗ trợ trình duyệt

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

Có sẵn một polyfill nếu bạn phải tương hỗ những trình duyệt cũ như Internet Explorer. Hoặc, bạn hoàn toàn có thể tuân theo phần còn sót 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 hiệu suất cao 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 4

Đây là một hiệu suất cao đáp ứng cho bạn tất cả những tham số URL dưới dạng một đối tượng ngăn nắ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 5

Bạn sẽ sớm thấy phương pháp hoạt động và sinh hoạt giải trí của tính năng này, nhưng trước tiên, đây là một số trong những 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 6

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 nên phải biết trước khi sử dụng hiệu suất cao này

Hàm của chúng tôi giả sử những 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 hoàn toà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 tất cả chúng ta vẫn hoạt động và sinh hoạt giải trí nếu một tham số không còn dấu bằng hoặc nếu nó có dấu bằng nhưng không còn mức giá trị

Các giá trị của những tham số trùng lặp được đưa vào một mảng

Nếu bạn chỉ muốn một hiệu suất cao mà bạn hoàn toàn có thể đưa vào mã của tớ, bạn đã hoàn thành xong ngay giờ đây. Nếu bạn muốn hiểu hiệu suất cao này hoạt động và sinh hoạt giải trí ra làm sao, hãy tham khảo tiếp

Phần sau đây giả sử bạn biết một số trong những JavaScript, gồm có 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 hiệu suất cao hoạt động và sinh hoạt giải trí

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 tài liệu trong một đối tượng ngăn nắp

Đầu tiên, dòng này cho biết thêm thêm, 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ỉ việc sử dụng URL của hiên chạy cửa số

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

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

const urlParams = new URLSearchParams(queryString); 0

Nếu chuỗi truy vấn tồn tại, chúng tôi sẽ khởi đầu phân tích cú pháp chuỗi đó. Trước tiên, chúng tôi phải đảm bảo vô hiệu phần bắt nguồn 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ấnconst urlParams = new URLSearchParams(queryString); 1

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

const urlParams = new URLSearchParams(queryString); 2

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

const urlParams = new URLSearchParams(queryString); 3

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 tớ

const urlParams = new URLSearchParams(queryString); 4

Hãy gán khóa và giá trị cho những biến riêng lẻ. Nếu không còn mứ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 thêm thêm 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ạnconst urlParams = new URLSearchParams(queryString); 5

Theo tùy chọn, bạn hoàn toà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 hoàn toàn có thể tránh được tình huống ai đó gửi lưu lượng truy vấn đế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àyconst urlParams = new URLSearchParams(queryString); 6

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

console.log(urlParams.has('product')); // true console.log(urlParams.has('paymentmethod')); // false 8. Đây hoàn toàn 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 quy đổ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ố trong những đầu vào mẫu, với đầu ra mà tất cả chúng ta mong đợi

const urlParams = new URLSearchParams(queryString); 7

Và đây là mã để thực hiện hiệu suất cao

const urlParams = new URLSearchParams(queryString); 8

Cuối cùng, chúng tôi trả về đối tượng của tớ với những 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 hoàn toàn có thể giải thuật chúng để nhận giá trị ban đầu như vậy nàyconst urlParams = new URLSearchParams(queryString); 9

Chỉ cần thận trọng không giải thuật thứ gì đó đã được giải thuật, 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 phương pháp lấy tham số URL và kỳ vọng bạn đã học được một số trong những thủ thuật khác trong quá trình thực hiện

Phần kết luận

Mã trong nội dung bài viết này hoạt động và sinh hoạt giải trí cho những 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 thao tác với bất kỳ trường hợp cạnh nào, ví dụ 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 nữa với URL, có sẵn những thư viện rõ ràng, ví dụ 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 nói rằng nó hoạt động và sinh hoạt giải trí cho những 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 những bài đăng của chúng tôi về tách chuỗi thành chuỗi con, quy đổi chuỗi thành số và quy đổi số thành chuỗi và thứ tự. Để có thêm kiến ​​thức nâng cao về JavaScript, hãy tham khảo cuốn sách JavaScript của chúng tôi. Tập làm Ninja, Phiên bản 2

Chia sẻ nội dung 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 tớ. Anh ấy viết mẹo và thủ thuật tại . //mã bước đơn giản. com. Theo ý kiến ​​​​hoàn toàn không thiên vị của tớ, anh ấy đề nghị kiểm tra nó

Tải thêm tài liệu liên quan đến nội dung bài viết Làm cách nào để lấy URL trong JavaScript? programming javascript

Video Làm cách nào để lấy URL trong JavaScript? ?

Bạn vừa Read nội dung bài viết Với Một số hướng dẫn một cách rõ ràng hơn về Clip Làm cách nào để lấy URL trong JavaScript? tiên tiến nhất

Chia Sẻ Link Tải Làm cách nào để lấy URL trong JavaScript? miễn phí

Bạn đang tìm một số trong những ShareLink Tải Làm cách nào để lấy URL trong JavaScript? miễn phí.

Hỏi đáp thắc mắc về Làm cách nào để lấy URL trong JavaScript?

Nếu sau khi đọc nội dung bài viết Làm cách nào để lấy URL trong JavaScript? vẫn chưa hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Admin lý giải và hướng dẫn lại nha #Làm #cách #nào #để #lấy #URL #trong #JavaScript