The tool library introduced today is QS. It supports serialization and deserialization of nested objects to search-string.

background

What is a search string? Address bar in a nutshell? And the argument that follows is search-string.

var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123'); 
var queryString = url.search; / / "? q=123"
Copy the code

Generally, search-string uses URL encode, and if you’ve used URLSearchParams, it supports serializing simple flat objects into search-string.

var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);

for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") = = =true; // true
searchParams.get("topic") = = ="api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") = = =null; // true
searchParams.append("topic"."webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic"."More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
Copy the code

Above is the official example of MDN. As you can see, URLSearchParams supports parsing to generate a wrapped object to operate on and query search-string. However, as you can see, this approach is cumbersome, and intuitively we would prefer to parse a Plain Object directly, using searchparams.foo instead of searchparams.get (‘foo’).

The use of qs

Today our protagonist QS is a good solution to this problem.

import qs from "qs";

var paramsString = "q=URLUtils.searchParams&topic=api";

var query = qs.parse(paramsString);

console.log(query); // {q: "URLUtils.searchParams", topic: "api"}
console.log(qs.stringify(query)); // q=URLUtils.searchParams&topic=api
Copy the code

Qs.parse generates a Plain Object directly, and Qs.stringify converts the Plain Object directly to query-String.

Another highlight is qs’s support for parsing nested objects.

import qs from "qs";

const obj = { a: "1".b: { c: "2" }, c: [1.2.3]};console.log(new URLSearchParams(obj).toString());
// a=1&b=%5Bobject+Object%5D&c=1%2C2%2C3

const objString = qs.stringify(obj, { allowDots: true });

console.log(objString);
// a=1&b.c=2&c%5B0%5D=1&c%5B1%5D=2&c%5B2%5D=3
console.log(qs.parse(objString, { allowDots: true }));
// { a: "1", b: { c: "2" }, c: [1, 2, 3] }

Copy the code

As you can see, URLSearchParams does not directly support serialization of nested objects, resulting in incorrect results, while Qs.stringify normally generates query Strings, but note that allowDots is not translated. The use of qs.parse also requires allowDots to parse the string properly.

scenario

Front-end applications continue to enrich and improve today, the jump between pages, cohesion is necessary. When jumping to a route, we need to provide some key information for the page to be entered, such as the ID of an entity, the query criteria of the table, the page number, etc. The use of search String is common.

Depending on the scenario used, it is recommended that only the first rendering after the jump get the contents of the search string and parse out the parameter object to initialize the components in the page. Use history.replace (react-router) to update the search parameter in the route during status update. By setting key parameters on the page, users can open and restore the page status when sharing links.