Đối tượng cho chuỗi truy vấn javascript

Là một nhà phát triển JavaScript, bạn sẽ thường xuyên gặp trường hợp này, và thay vì tìm kiếm trên google cách chuyển đối tượng thành tham số chuỗi truy vấn, thì trong bài viết này chúng ta sẽ lướt qua những cách nhanh nhất và hiệu quả nhất.  

Thử nghiệm sự cố

Trong bài viết này, chúng ta sẽ cùng nhau chuyển đổi định dạng có giống như thế này không?

let obj = {
   id: 1234,
   search: 'query string parameters in JavaScript',
   token: '123412341341',
}

And variable objects on this format

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

Ở hướng dẫn này thì không khó hay suy nghĩ nhiều, ở đây tôi chỉ liệt kê cho các bạn cách nhanh nhất có thể chứ không cần suy nghĩ hay có một vấn đề cao siêu gì ở đây.  

1 - Sử dụng map và join javascript

ES6

var queryString = Object.keys[params].map[key => key + '=' + params[key]].join['&'];

ES5

var queryString = Object.keys[params].map[function[key] {
    return key + '=' + params[key]
}].join['&'];

2 - Sử dụng jquery javascript

Bạn nào đang sử dụng jquery trên client thì có thể sử dụng chúng cho những task như thế này

var queryString = $.param[params];

3 - Sử dụng trong nút javascript

Nếu bạn đang sử dụng trong nút môi trường thì cũng có một cách nhanh và gọn. Đó là mô-đun chuỗi truy vấn trong nút

const querystring = require['querystring'];
let queryString = querystring.stringify[params];

4 - mã hóaURIThành phần javascript

var queryString = Object.keys[params].map[[key] => {
    return encodeURIComponent[key] + '=' + encodeURIComponent[params[key]]
}].join['&'];

Những mẹo này theo tôi bạn nên lưu vào một tệp Utils. Trong một vòng đời của một dev luôn có một tập tin Utils. Cho nên đây sẽ là một trong những mẹo cần ghi lại.  

Bài viết này chỉ cho bạn một số cách khác nhau để chuyển đổi [xâu chuỗi] đối tượng thành chuỗi truy vấn trong Node. js

Sử dụng API URLSearchParams

Lớp URLSearchParams đi kèm với mô-đun URL và có sẵn trên đối tượng chung để bạn có thể sử dụng nó mà không cần “yêu cầu” hoặc “nhập”. quảng cáo

Ví dụ

// kindacode.com
const params = {
  category: 'book',
  language: 'en',
  page: 12,
  perPage: 10,
  order: 'price',
  orderBy: 'desc',
  author: ['John Doe', 'Jane Dee']
}

const qs = new URLSearchParams[params];
console.log[qs.toString[]]

đầu ra

________số 8

Sử dụng mô-đun chuỗi truy vấn

chuỗi truy vấn là một mô-đun tích hợp của Node. js có thể giúp chúng tôi hoàn thành công việc

Ví dụ

// kindacode.com
import queryString from 'querystring';

// for Commonjs, use this:
// const queryString = require['queryString'];

const obj = {
  name: 'John Doe',
  age: 36, 
  skill: 'Node.js'
}

const qs = queryString.stringify[obj]
console.log[qs]

đầu ra

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

0

API chuỗi truy vấn hoạt động tốt và vẫn được duy trì nhưng nó được coi là cũ. Thay vào đó, tài liệu chính thức khuyên bạn nên sử dụng URLSearchParams [cách tiếp cận đầu tiên]. quảng cáo

Viết chức năng của riêng bạn

Với một vài dòng mã, chúng ta có thể viết một hàm để xâu chuỗi một đối tượng

Ví dụ

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

1

đầu ra

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

2

Sử dụng thư viện của bên thứ ba

Có một số gói nguồn mở có thể dễ dàng xâu chuỗi một đối tượng trong Node. js. Một tên phổ biến là querystringify

Cài đặt nó bằng cách chạy

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

3

Ví dụ

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

4

đầu ra

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

5

Phần kết luận

Bạn đã học được nhiều hơn một cách để biến đối tượng thành chuỗi truy vấn trong Node. js. Hãy tiếp tục lăn và tiếp tục khám phá những điều thú vị hơn bằng cách xem qua các bài viết sau

Trong một URL, các giá trị chuỗi truy vấn thường cung cấp thông tin về yêu cầu, chẳng hạn như tham số cho tìm kiếm hoặc ID của đối tượng bạn đang sử dụng. Nếu bất kỳ logic yêu cầu hoặc nghiệp vụ nào được xử lý ở giao diện người dùng, điều quan trọng là phải biết cách truy xuất các giá trị chuỗi truy vấn từ URL. Có một số cách để đạt được điều này, một vài trong số đó chúng ta sẽ thấy ở đây

URLTìm kiếmThông số

Giao diện

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

7 được hỗ trợ bởi tất cả các phiên bản trình duyệt chính ngoại trừ IE 11. Nó hoạt động bằng cách phân tích cú pháp chuỗi truy vấn của một URL và cung cấp cách truy cập các giá trị. Ví dụ

Một trong những nhược điểm của giao diện này là bạn chỉ phải truyền cho nó chuỗi truy vấn của một URL. Nếu bạn đang làm việc với URL trình duyệt hiện tại, điều đó rất dễ thực hiện vì bạn chỉ cần vượt qua

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

8. Nếu bạn đang làm việc với bất kỳ URL nào khác, bạn sẽ cần phân tích cú pháp và chuyển chuỗi truy vấn một cách riêng biệt

Để phân tích cú pháp các tham số truy vấn thành một đối tượng, hãy sử dụng phương thức

var queryString = Object.keys[params].map[key => key + '=' + params[key]].join['&'];

0 của

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

9, trả về một

var queryString = Object.keys[params].map[key => key + '=' + params[key]].join['&'];

1 cặp khóa/giá trị và

var queryString = Object.keys[params].map[key => key + '=' + params[key]].join['&'];

2 để chuyển đổi nó thành một đối tượng

Đối tượng URL

API

var queryString = Object.keys[params].map[key => key + '=' + params[key]].join['&'];

3 cũng được hỗ trợ bởi tất cả các phiên bản trình duyệt chính ngoại trừ IE 11. Nó cung cấp một cách linh hoạt hơn để phân tích cú pháp URL và nó cũng cung cấp một cách để truy cập các giá trị chuỗi truy vấn. Ví dụ

var queryString = Object.keys[params].map[key => key + '=' + params[key]].join['&'];

4 là cùng loại đối tượng thể hiện được trả về bởi

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

7

Đối tượng

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

70 ở trên cũng có tất cả các phần của URL được chia thành các phần của nó. Ví dụ

JavaScript thuần túy

Nếu vì bất kỳ lý do gì mà bạn không thể truy cập các API ở trên hoặc muốn có nhiều quyền kiểm soát hơn đối với việc phân tích cú pháp, bạn có thể sử dụng đoạn mã sau để phân tích cú pháp chuỗi truy vấn thành một đối tượng

//anonystick.com?id=1234&search=query%20string%20parameters%20in%20JavaScript&token=123412341341

6

Ghi chú. Có nhiều cách để phân tích các tham số truy vấn trong JS đơn giản, một số phức tạp hơn [và mạnh mẽ] hơn các cách khác. Đây chỉ là một cách, và được điều chỉnh từ ý chính này

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

Làm cách nào để lấy giá trị chuỗi truy vấn trong JavaScript?

Làm cách nào để tuần tự hóa một đối tượng thành danh sách các tham số truy vấn URL?

Chuỗi truy vấn JavaScript là gì?