JavaScript - Converting Query String to Object with Null, Undefined, and Boolean Values

Here are the different methods to convert query string to object with null, undefined and boolean values.

1. Using URLSearchParams API

The URLSearchParams interface provides an easy and modern way to work with query strings. It lets you easily parse the query string and convert it into a JavaScript object while handling null and undefined values.

{ name: 'Rahul', age: '30', isAdmin: true, city: null }

• URLSearchParams(q) converts the query string into a URLSearchParams object.
• params.entries() iterates over each key-value pair.
• The check for "null", "undefined", "true", and "false" is done to handle special cases like null and booleans properly.

2. Using reduce() Method with split()

You can manually parse the query string by splitting it into key-value pairs and then using the reduce() method to construct the object. This method allows for greater flexibility in handling custom conversions for null, undefined, and boolean values.

{ name: 'Rahul', age: '30', isAdmin: true, city: null }

• .substring(1) removes the leading question mark ? from the query string.
• .split('&') breaks the query string into individual key-value pairs.
• reduce() constructs the final object by checking each value and converting it to the appropriate type (e.g., null, undefined, true, false).

3. Using decodeURIComponent() for Decoding Special Characters

In some cases, query string values might be URL-encoded, and you may need to decode these values before parsing. Using decodeURIComponent() helps handle special characters like spaces and special symbols.

{
 name: 'Amit',
 age: '30',
 isAdmin: true,
 city: null,
 address: 'New Delhi'
}

• decodeURIComponent() decodes URL-encoded characters, ensuring that special characters in the query string (e.g., spaces as %20) are correctly handled.
• The rest of the logic is similar to the previous method but now includes decoding for both keys and values.

4. Using Regular Expressions for Query String Parsing

Regular expressions provide a powerful way to extract key-value pairs from a query string. You can use them to parse and convert values into the appropriate data types (e.g., null, undefined, true, false).

{ name: 'Amit', age: '30', isAdmin: true, city: null }

• The regular expression /[?&]([^=]+)=([^&]*)/g matches all key-value pairs in the query string.
• decodeURIComponent() ensures that encoded characters are decoded correctly.
• The rest of the logic checks for special values like null, undefined, and booleans.

Which Approach to Choose?