How to Generate URL Query Strings in JavaScript

Writing out the URL query string can become cumbersome at times. It gets long and tedious to maintain and fix.

const URI = "https://example.org/path?key1=val1&key2=val2&key3=val3";

What if there was a way to generate these query strings from a dictionary mapping of these keys and values?

We can define a generic function to make this translation from map to query string.

const generateQueryString = (params) => {
  return Object.keys(params)
    .map((v, i) => (i !== 0 ? "&" : "?") + `${v}=${o[v]}`)
    .join("");
};

And then use it like so.

const queryString = generateQueryString({
  key1: "val1",
  key2: "val2",
  key3: "val3"
});
const URI = "https://example.org/path" + queryString;

We can also use the URLSearchParams API to perform the same thing. Fortunately, it’s available on all modern browsers.

const queryString = new URLSearchParams({
  key1: "val1",
  key2: "val2",
  key3: "val3"
});
// Don't forget the ?
const URI = "https://example.org/path" + "?" + queryString;

We can also append to this queryString if needed using append().

queryString.append("key4", "val4");

How to Generate URL Query Strings in JavaScript

Related in JS