qs vs url-parse vs query-string vs url
URL 解析与查询字符串处理库深度对比
qsurl-parsequery-stringurl类似的npm包:

URL 解析与查询字符串处理库深度对比

qsquery-stringurlurl-parse 都是 JavaScript 生态中用于处理 URL 和查询字符串的工具,但它们的侧重点截然不同。qsquery-string 专注于将查询字符串解析为对象或反之,常用于前端状态同步或后端参数接收;url(npm 包)是 Node.js 核心模块的浏览器 polyfill,用于兼容旧式 URL 解析;url-parse 则专注于高性能的完整 URL 结构解析与修改。在现代前端架构中,理解它们的差异对于选择正确的工具处理路由、API 请求和数据序列化至关重要。

npm下载趋势

3 年

GitHub Stars 排名

统计详情

npm包名称
下载量
Stars
大小
Issues
发布时间
License
qs165,873,4478,941347 kB725 天前BSD-3-Clause
url-parse38,160,3571,03563 kB16-MIT
query-string21,434,2616,90559.1 kB21 天前MIT
url20,435,14337778.3 kB182 年前MIT

URL 解析与查询字符串处理库深度对比:qs vs query-string vs url vs url-parse

在构建现代 Web 应用时,处理 URL 和查询字符串是不可或缺的一部分。无论是路由管理、API 参数传递,还是浏览器地址栏状态同步,都需要可靠的工具。qsquery-stringurlurl-parse 是生态中最常见的四个选择,但它们的定位和能力差异巨大。本文将从架构师视角,深入对比它们的核心能力、适用场景及潜在陷阱。

📦 查询参数解析:对象化能力的差异

处理查询字符串的核心需求通常是将其转换为 JavaScript 对象,以便代码使用。这四个包在处理方式上有显著不同。

qs 擅长处理复杂的嵌套结构,默认会将 a[b]=1 解析为嵌套对象。

import qs from 'qs';

const query = 'a[b]=1&c=2';
const obj = qs.parse(query);
// 输出:{ a: { b: '1' }, c: '2' }

query-string 默认将查询参数视为扁平结构,数组需要特定格式(如 a[]=1)。

import queryString from 'query-string';

const query = 'a[b]=1&c=2';
const obj = queryString.parse(query);
// 输出:{ 'a[b]': '1', c: '2' } (键名保持原样)

url (npm 包) 模仿 Node.js 核心模块,默认返回查询字符串,需显式开启解析选项。

import url from 'url';

const fullUrl = 'http://example.com?a[b]=1&c=2';
const obj = url.parse(fullUrl, true).query;
// 输出:{ 'a[b]': '1', c: '2' } (使用 Node 默认 querystring 模块)

url-parse 专注于 URL 结构,查询属性默认是字符串,不自动转为对象。

import UrlParse from 'url-parse';

const fullUrl = 'http://example.com?a[b]=1&c=2';
const parsed = new UrlParse(fullUrl);
const queryStr = parsed.query; 
// 输出:'?a[b]=1&c=2' (需配合 qs 或 query-string 进一步解析)

🌲 嵌套数据与数组格式支持

在处理表单提交或复杂筛选器时,嵌套数据和数组格式的支持至关重要。

qs 提供最强的嵌套支持,可配置数组格式(括号、索引等)。

import qs from 'qs';

const obj = { users: ['alice', 'bob'] };
const str = qs.stringify(obj, { arrayFormat: 'brackets' });
// 输出:'users[]=alice&users[]=bob'

query-string 支持数组,但默认行为较严格,需配置 arrayFormat

import queryString from 'query-string';

const obj = { users: ['alice', 'bob'] };
const str = queryString.stringify(obj, { arrayFormat: 'bracket' });
// 输出:'users[]=alice&users[]=bob'

url (npm 包) 依赖内置的 querystring 逻辑,不支持复杂的嵌套对象序列化。

import url from 'url';

// url 包本身不负责 stringify 复杂对象,通常配合 querystring 使用
// 这里展示其局限性,无法直接序列化嵌套对象到 URL 字符串
const str = '?users=alice&users=bob'; // 需手动处理或依赖其他库

url-parse 不提供序列化逻辑,它只负责存储和修改查询字符串部分。

import UrlParse from 'url-parse';

const parsed = new UrlParse('http://example.com');
// 需手动设置查询字符串,不支持直接传入对象进行序列化
parsed.set('query', 'users[]=alice&users[]=bob'); 

🌐 完整 URL 结构解析与修改

当需要操作协议、主机名、端口而不仅仅是查询参数时,工具的选择范围缩小。

qs 仅处理查询字符串,无法解析完整 URL。

import qs from 'qs';

// qs 不接受完整 URL,会抛出错误或结果不可用
// 必须先手动提取查询部分
const query = window.location.search; 
const obj = qs.parse(query);

query-string 同样仅专注于查询字符串部分。

import queryString from 'query-string';

// 需手动传入 search 部分
const obj = queryString.parse(window.location.search);

url (npm 包) 可解析完整 URL,但 API 是旧式的,返回对象不可变。

import url from 'url';

const parsed = url.parse('http://user:pass@host.com:8080/p/a/t/h?query=string#hash');
// 输出包含 protocol, hostname, port, pathname, query, hash 等属性

url-parse 专为完整 URL 设计,支持修改后重新生成,性能优异。

import UrlParse from 'url-parse';

const parsed = new UrlParse('http://example.com/path');
parsed.set('protocol', 'https:');
parsed.set('hostname', 'new-host.com');
const newUrl = parsed.toString();
// 输出:'https://new-host.com/path'

⚠️ 维护状态与现代替代方案

在架构选型时,库的维护状态和是否被现代标准取代是关键考量。

qs 处于活跃维护状态,是 Express 等框架的标准依赖,稳定性高。

// 持续更新,支持最新 Node 版本
import qs from 'qs'; 

query-string 处于活跃维护状态,广泛用于前端生态,遵循现代编码标准。

// 持续更新,轻量且可靠
import queryString from 'query-string';

url (npm 包) 实际上是 Node.js 核心模块的 polyfill,已不再推荐用于新浏览器项目。

// ❌ 不推荐:现代浏览器原生支持 URL API
import url from 'url'; 
// ✅ 推荐:使用原生 API
const u = new URL('http://example.com');

url-parse 处于维护状态,适用于需要兼容旧环境或特殊解析逻辑的场景。

// 适用于需要比原生 URL 更宽容的解析场景
import UrlParse from 'url-parse';

📊 核心特性对比总结

特性qsquery-stringurl (npm)url-parse
主要用途查询字符串序列化/反序列化查询字符串序列化/反序列化Node URL 模块 Polyfill完整 URL 解析与修改
嵌套对象支持✅ 强大 (默认)⚠️ 有限 (需配置)❌ 不支持❌ 不支持
完整 URL 解析❌ 否❌ 否✅ 是 (旧式)✅ 是 (高性能)
修改 URL 组件❌ 否❌ 否❌ 否 (不可变)✅ 是 (可变)
现代标准兼容✅ 是✅ 是❌ 否 (遗留)⚠️ 部分
推荐场景后端、复杂参数前端、简单参数遗留系统 Polyfill特殊 URL 处理

💡 架构师建议

qs 是处理复杂数据交互的瑞士军刀 🇨🇭,特别是在需要深度嵌套参数或与 Node.js 后端保持一致时,它是首选。但它的功能过于强大,有时会导致安全风险(如原型污染),需配置 allowPrototypes: false

query-string 是前端开发的轻量级伴侣 🎒,它的行为更可预测,默认更安全,适合大多数 React/Vue 应用中的地址栏状态同步。

url (npm 包) 应被视为遗留技术 🕸️。在现代前端架构中,应优先使用浏览器原生的 URLURLSearchParams 接口,它们性能更好且无需依赖。

url-parse 是特定场景的专家 🛠️,当你需要修改 URL 的特定部分(如动态切换协议或主机)且需要兼容旧浏览器时,它比原生 URL 对象更灵活。

最终结论:对于 90% 的现代前端项目,组合使用原生 URL API 处理完整 URL,配合 query-stringURLSearchParams 处理查询参数是最佳实践。仅在需要深度嵌套解析或特殊兼容性时引入 qsurl-parse

如何选择: qs vs url-parse vs query-string vs url

  • qs:

    选择 qs 如果你需要处理复杂的嵌套查询参数(如 a[b][c]=1),或者你在 Node.js Express 环境中工作(它是默认解析器)。它对数组和对象的支持最丰富,适合后端或全栈场景。

  • url-parse:

    选择 url-parse 如果你需要高性能地解析和修改完整 URL 的各个部分(协议、主机、路径、查询),且需要兼容旧浏览器或处理非标准 URL 格式。它比原生 URL 接口更宽容且可变。

  • query-string:

    选择 query-string 如果你主要在前端(如 React、Vue)工作,需要轻量级且严格的查询字符串处理。它默认行为更符合现代 Web 标准,适合处理扁平化的参数同步。

  • url:

    不建议在新项目中使用 url npm 包。它是 Node.js 旧版 API 的 polyfill,现代浏览器和 Node.js 已原生支持 URLURLSearchParams 接口。仅在维护遗留系统且必须模拟 Node url 模块行为时考虑。

qs的README

qs

qs Version Badge

github actions coverage License Downloads CII Best Practices

npm badge

A querystring parsing and stringifying library with some added security.

Lead Maintainer: Jordan Harband

The qs module was originally created and maintained by TJ Holowaychuk.

Usage

var qs = require('qs');
var assert = require('assert');

var obj = qs.parse('a=c');
assert.deepEqual(obj, { a: 'c' });

var str = qs.stringify(obj);
assert.equal(str, 'a=c');

Parsing Objects

qs.parse(string, [options]);

qs allows you to create nested objects within your query strings, by surrounding the name of sub-keys with square brackets []. For example, the string 'foo[bar]=baz' converts to:

assert.deepEqual(qs.parse('foo[bar]=baz'), {
    foo: {
        bar: 'baz'
    }
});

When using the plainObjects option the parsed value is returned as a null object, created via { __proto__: null } and as such you should be aware that prototype methods will not exist on it and a user may set those names to whatever value they like:

var nullObject = qs.parse('a[hasOwnProperty]=b', { plainObjects: true });
assert.deepEqual(nullObject, { a: { hasOwnProperty: 'b' } });

By default parameters that would overwrite properties on the object prototype are ignored, if you wish to keep the data from those fields either use plainObjects as mentioned above, or set allowPrototypes to true which will allow user input to overwrite those properties. WARNING It is generally a bad idea to enable this option as it can cause problems when attempting to use the properties that have been overwritten. Always be careful with this option.

var protoObject = qs.parse('a[hasOwnProperty]=b', { allowPrototypes: true });
assert.deepEqual(protoObject, { a: { hasOwnProperty: 'b' } });

URI encoded strings work too:

assert.deepEqual(qs.parse('a%5Bb%5D=c'), {
    a: { b: 'c' }
});

You can also nest your objects, like 'foo[bar][baz]=foobarbaz':

assert.deepEqual(qs.parse('foo[bar][baz]=foobarbaz'), {
    foo: {
        bar: {
            baz: 'foobarbaz'
        }
    }
});

By default, when nesting objects qs will only parse up to 5 children deep. This means if you attempt to parse a string like 'a[b][c][d][e][f][g][h][i]=j' your resulting object will be:

var expected = {
    a: {
        b: {
            c: {
                d: {
                    e: {
                        f: {
                            '[g][h][i]': 'j'
                        }
                    }
                }
            }
        }
    }
};
var string = 'a[b][c][d][e][f][g][h][i]=j';
assert.deepEqual(qs.parse(string), expected);

This depth can be overridden by passing a depth option to qs.parse(string, [options]):

var deep = qs.parse('a[b][c][d][e][f][g][h][i]=j', { depth: 1 });
assert.deepEqual(deep, { a: { b: { '[c][d][e][f][g][h][i]': 'j' } } });

You can configure qs to throw an error when parsing nested input beyond this depth using the strictDepth option (defaulted to false):

try {
    qs.parse('a[b][c][d][e][f][g][h][i]=j', { depth: 1, strictDepth: true });
} catch (err) {
    assert(err instanceof RangeError);
    assert.strictEqual(err.message, 'Input depth exceeded depth option of 1 and strictDepth is true');
}

The depth limit helps mitigate abuse when qs is used to parse user input, and it is recommended to keep it a reasonably small number. The strictDepth option adds a layer of protection by throwing an error when the limit is exceeded, allowing you to catch and handle such cases.

For similar reasons, by default qs will only parse up to 1000 parameters. This can be overridden by passing a parameterLimit option:

var limited = qs.parse('a=b&c=d', { parameterLimit: 1 });
assert.deepEqual(limited, { a: 'b' });

If you want an error to be thrown whenever the a limit is exceeded (eg, parameterLimit, arrayLimit), set the throwOnLimitExceeded option to true. This option will generate a descriptive error if the query string exceeds a configured limit.

try {
    qs.parse('a=1&b=2&c=3&d=4', { parameterLimit: 3, throwOnLimitExceeded: true });
} catch (err) {
    assert(err instanceof Error);
    assert.strictEqual(err.message, 'Parameter limit exceeded. Only 3 parameters allowed.');
}

When throwOnLimitExceeded is set to false (default), qs will parse up to the specified parameterLimit and ignore the rest without throwing an error.

To bypass the leading question mark, use ignoreQueryPrefix:

var prefixed = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true });
assert.deepEqual(prefixed, { a: 'b', c: 'd' });

An optional delimiter can also be passed:

var delimited = qs.parse('a=b;c=d', { delimiter: ';' });
assert.deepEqual(delimited, { a: 'b', c: 'd' });

Delimiters can be a regular expression too:

var regexed = qs.parse('a=b;c=d,e=f', { delimiter: /[;,]/ });
assert.deepEqual(regexed, { a: 'b', c: 'd', e: 'f' });

Option allowDots can be used to enable dot notation:

var withDots = qs.parse('a.b=c', { allowDots: true });
assert.deepEqual(withDots, { a: { b: 'c' } });

Option decodeDotInKeys can be used to decode dots in keys Note: it implies allowDots, so parse will error if you set decodeDotInKeys to true, and allowDots to false.

var withDots = qs.parse('name%252Eobj.first=John&name%252Eobj.last=Doe', { decodeDotInKeys: true });
assert.deepEqual(withDots, { 'name.obj': { first: 'John', last: 'Doe' }});

Option allowEmptyArrays can be used to allow empty array values in an object

var withEmptyArrays = qs.parse('foo[]&bar=baz', { allowEmptyArrays: true });
assert.deepEqual(withEmptyArrays, { foo: [], bar: 'baz' });

Option duplicates can be used to change the behavior when duplicate keys are encountered

assert.deepEqual(qs.parse('foo=bar&foo=baz'), { foo: ['bar', 'baz'] });
assert.deepEqual(qs.parse('foo=bar&foo=baz', { duplicates: 'combine' }), { foo: ['bar', 'baz'] });
assert.deepEqual(qs.parse('foo=bar&foo=baz', { duplicates: 'first' }), { foo: 'bar' });
assert.deepEqual(qs.parse('foo=bar&foo=baz', { duplicates: 'last' }), { foo: 'baz' });

Note that keys with bracket notation ([]) always combine into arrays, regardless of the duplicates setting:

assert.deepEqual(qs.parse('a=1&a=2&b[]=1&b[]=2', { duplicates: 'last' }), { a: '2', b: ['1', '2'] });

If you have to deal with legacy browsers or services, there's also support for decoding percent-encoded octets as iso-8859-1:

var oldCharset = qs.parse('a=%A7', { charset: 'iso-8859-1' });
assert.deepEqual(oldCharset, { a: '§' });

Some services add an initial utf8=✓ value to forms so that old Internet Explorer versions are more likely to submit the form as utf-8. Additionally, the server can check the value against wrong encodings of the checkmark character and detect that a query string or application/x-www-form-urlencoded body was not sent as utf-8, eg. if the form had an accept-charset parameter or the containing page had a different character set.

qs supports this mechanism via the charsetSentinel option. If specified, the utf8 parameter will be omitted from the returned object. It will be used to switch to iso-8859-1/utf-8 mode depending on how the checkmark is encoded.

Important: When you specify both the charset option and the charsetSentinel option, the charset will be overridden when the request contains a utf8 parameter from which the actual charset can be deduced. In that sense the charset will behave as the default charset rather than the authoritative charset.

var detectedAsUtf8 = qs.parse('utf8=%E2%9C%93&a=%C3%B8', {
    charset: 'iso-8859-1',
    charsetSentinel: true
});
assert.deepEqual(detectedAsUtf8, { a: 'ø' });

// Browsers encode the checkmark as ✓ when submitting as iso-8859-1:
var detectedAsIso8859_1 = qs.parse('utf8=%26%2310003%3B&a=%F8', {
    charset: 'utf-8',
    charsetSentinel: true
});
assert.deepEqual(detectedAsIso8859_1, { a: 'ø' });

If you want to decode the &#...; syntax to the actual character, you can specify the interpretNumericEntities option as well:

var detectedAsIso8859_1 = qs.parse('a=%26%239786%3B', {
    charset: 'iso-8859-1',
    interpretNumericEntities: true
});
assert.deepEqual(detectedAsIso8859_1, { a: '☺' });

It also works when the charset has been detected in charsetSentinel mode.

Parsing Arrays

qs can also parse arrays using a similar [] notation:

var withArray = qs.parse('a[]=b&a[]=c');
assert.deepEqual(withArray, { a: ['b', 'c'] });

You may specify an index as well:

var withIndexes = qs.parse('a[1]=c&a[0]=b');
assert.deepEqual(withIndexes, { a: ['b', 'c'] });

Note that the only difference between an index in an array and a key in an object is that the value between the brackets must be a number to create an array. When creating arrays with specific indices, qs will compact a sparse array to only the existing values preserving their order:

var noSparse = qs.parse('a[1]=b&a[15]=c');
assert.deepEqual(noSparse, { a: ['b', 'c'] });

You may also use allowSparse option to parse sparse arrays:

var sparseArray = qs.parse('a[1]=2&a[3]=5', { allowSparse: true });
assert.deepEqual(sparseArray, { a: [, '2', , '5'] });

Note that an empty string is also a value, and will be preserved:

var withEmptyString = qs.parse('a[]=&a[]=b');
assert.deepEqual(withEmptyString, { a: ['', 'b'] });

var withIndexedEmptyString = qs.parse('a[0]=b&a[1]=&a[2]=c');
assert.deepEqual(withIndexedEmptyString, { a: ['b', '', 'c'] });

qs will also limit arrays to a maximum of 20 elements. Any array members with an index of 20 or greater will instead be converted to an object with the index as the key. This is needed to handle cases when someone sent, for example, a[999999999] and it will take significant time to iterate over this huge array.

var withMaxIndex = qs.parse('a[100]=b');
assert.deepEqual(withMaxIndex, { a: { '100': 'b' } });

This limit can be overridden by passing an arrayLimit option:

var withArrayLimit = qs.parse('a[1]=b', { arrayLimit: 0 });
assert.deepEqual(withArrayLimit, { a: { '1': 'b' } });

If you want to throw an error whenever the array limit is exceeded, set the throwOnLimitExceeded option to true. This option will generate a descriptive error if the query string exceeds a configured limit.

try {
    qs.parse('a[1]=b', { arrayLimit: 0, throwOnLimitExceeded: true });
} catch (err) {
    assert(err instanceof Error);
    assert.strictEqual(err.message, 'Array limit exceeded. Only 0 elements allowed in an array.');
}

When throwOnLimitExceeded is set to false (default), qs will parse up to the specified arrayLimit and if the limit is exceeded, the array will instead be converted to an object with the index as the key

To prevent array syntax (a[], a[0]) from being parsed as arrays, set parseArrays to false. Note that duplicate keys (e.g. a=b&a=c) may still produce arrays when duplicates is 'combine' (the default).

var noParsingArrays = qs.parse('a[]=b', { parseArrays: false });
assert.deepEqual(noParsingArrays, { a: { '0': 'b' } });

If you mix notations, qs will merge the two items into an object:

var mixedNotation = qs.parse('a[0]=b&a[b]=c');
assert.deepEqual(mixedNotation, { a: { '0': 'b', b: 'c' } });

When a key appears as both a plain value and an object, qs will by default wrap the conflicting values in an array (strictMerge defaults to true):

assert.deepEqual(qs.parse('a[b]=c&a=d'), { a: [{ b: 'c' }, 'd'] });
assert.deepEqual(qs.parse('a=d&a[b]=c'), { a: ['d', { b: 'c' }] });

To restore the legacy behavior (where the primitive is used as a key with value true), set strictMerge to false:

assert.deepEqual(qs.parse('a[b]=c&a=d', { strictMerge: false }), { a: { b: 'c', d: true } });

You can also create arrays of objects:

var arraysOfObjects = qs.parse('a[][b]=c');
assert.deepEqual(arraysOfObjects, { a: [{ b: 'c' }] });

Some people use comma to join array, qs can parse it:

var arraysOfObjects = qs.parse('a=b,c', { comma: true })
assert.deepEqual(arraysOfObjects, { a: ['b', 'c'] })

(this cannot convert nested objects, such as a={b:1},{c:d})

Parsing primitive/scalar values (numbers, booleans, null, etc)

By default, all values are parsed as strings. This behavior will not change and is explained in issue #91.

var primitiveValues = qs.parse('a=15&b=true&c=null');
assert.deepEqual(primitiveValues, { a: '15', b: 'true', c: 'null' });

If you wish to auto-convert values which look like numbers, booleans, and other values into their primitive counterparts, you can use the query-types Express JS middleware which will auto-convert all request query parameters.

Stringifying

qs.stringify(object, [options]);

When stringifying, qs by default URI encodes output. Objects are stringified as you would expect:

assert.equal(qs.stringify({ a: 'b' }), 'a=b');
assert.equal(qs.stringify({ a: { b: 'c' } }), 'a%5Bb%5D=c');

This encoding can be disabled by setting the encode option to false:

var unencoded = qs.stringify({ a: { b: 'c' } }, { encode: false });
assert.equal(unencoded, 'a[b]=c');

Encoding can be disabled for keys by setting the encodeValuesOnly option to true:

var encodedValues = qs.stringify(
    { a: 'b', c: ['d', 'e=f'], f: [['g'], ['h']] },
    { encodeValuesOnly: true }
);
assert.equal(encodedValues,'a=b&c[0]=d&c[1]=e%3Df&f[0][0]=g&f[1][0]=h');

This encoding can also be replaced by a custom encoding method set as encoder option:

var encoded = qs.stringify({ a: { b: 'c' } }, { encoder: function (str) {
    // Passed in values `a`, `b`, `c`
    return // Return encoded string
}})

(Note: the encoder option does not apply if encode is false)

Analogue to the encoder there is a decoder option for parse to override decoding of properties and values:

var decoded = qs.parse('x=z', { decoder: function (str) {
    // Passed in values `x`, `z`
    return // Return decoded string
}})

You can encode keys and values using different logic by using the type argument provided to the encoder:

var encoded = qs.stringify({ a: { b: 'c' } }, { encoder: function (str, defaultEncoder, charset, type) {
    if (type === 'key') {
        return // Encoded key
    } else if (type === 'value') {
        return // Encoded value
    }
}})

The type argument is also provided to the decoder:

var decoded = qs.parse('x=z', { decoder: function (str, defaultDecoder, charset, type) {
    if (type === 'key') {
        return // Decoded key
    } else if (type === 'value') {
        return // Decoded value
    }
}})

Examples beyond this point will be shown as though the output is not URI encoded for clarity. Please note that the return values in these cases will be URI encoded during real usage.

When arrays are stringified, they follow the arrayFormat option, which defaults to indices:

qs.stringify({ a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'

You may override this by setting the indices option to false, or to be more explicit, the arrayFormat option to repeat:

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
// 'a=b&a=c&a=d'

You may use the arrayFormat option to specify the format of the output array:

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'

Note: when using arrayFormat set to 'comma', you can also pass the commaRoundTrip option set to true or false, to append [] on single-item arrays, so that they can round trip through a parse.

When objects are stringified, by default they use bracket notation:

qs.stringify({ a: { b: { c: 'd', e: 'f' } } });
// 'a[b][c]=d&a[b][e]=f'

You may override this to use dot notation by setting the allowDots option to true:

qs.stringify({ a: { b: { c: 'd', e: 'f' } } }, { allowDots: true });
// 'a.b.c=d&a.b.e=f'

You may encode the dot notation in the keys of object with option encodeDotInKeys by setting it to true: Note: it implies allowDots, so stringify will error if you set decodeDotInKeys to true, and allowDots to false. Caveat: when encodeValuesOnly is true as well as encodeDotInKeys, only dots in keys and nothing else will be encoded.

qs.stringify({ "name.obj": { "first": "John", "last": "Doe" } }, { allowDots: true, encodeDotInKeys: true })
// 'name%252Eobj.first=John&name%252Eobj.last=Doe'

You may allow empty array values by setting the allowEmptyArrays option to true:

qs.stringify({ foo: [], bar: 'baz' }, { allowEmptyArrays: true });
// 'foo[]&bar=baz'

Empty strings and null values will omit the value, but the equals sign (=) remains in place:

assert.equal(qs.stringify({ a: '' }), 'a=');

Key with no values (such as an empty object or array) will return nothing:

assert.equal(qs.stringify({ a: [] }), '');
assert.equal(qs.stringify({ a: {} }), '');
assert.equal(qs.stringify({ a: [{}] }), '');
assert.equal(qs.stringify({ a: { b: []} }), '');
assert.equal(qs.stringify({ a: { b: {}} }), '');

Properties that are set to undefined will be omitted entirely:

assert.equal(qs.stringify({ a: null, b: undefined }), 'a=');

The query string may optionally be prepended with a question mark:

assert.equal(qs.stringify({ a: 'b', c: 'd' }, { addQueryPrefix: true }), '?a=b&c=d');

Note that when the output is an empty string, the prefix will not be added:

assert.equal(qs.stringify({}, { addQueryPrefix: true }), '');

The delimiter may be overridden with stringify as well:

assert.equal(qs.stringify({ a: 'b', c: 'd' }, { delimiter: ';' }), 'a=b;c=d');

If you only want to override the serialization of Date objects, you can provide a serializeDate option:

var date = new Date(7);
assert.equal(qs.stringify({ a: date }), 'a=1970-01-01T00:00:00.007Z'.replace(/:/g, '%3A'));
assert.equal(
    qs.stringify({ a: date }, { serializeDate: function (d) { return d.getTime(); } }),
    'a=7'
);

You may use the sort option to affect the order of parameter keys:

function alphabeticalSort(a, b) {
    return a.localeCompare(b);
}
assert.equal(qs.stringify({ a: 'c', z: 'y', b : 'f' }, { sort: alphabeticalSort }), 'a=c&b=f&z=y');

Finally, you can use the filter option to restrict which keys will be included in the stringified output. If you pass a function, it will be called for each key to obtain the replacement value. Otherwise, if you pass an array, it will be used to select properties and array indices for stringification:

function filterFunc(prefix, value) {
    if (prefix == 'b') {
        // Return an `undefined` value to omit a property.
        return;
    }
    if (prefix == 'e[f]') {
        return value.getTime();
    }
    if (prefix == 'e[g][0]') {
        return value * 2;
    }
    return value;
}
qs.stringify({ a: 'b', c: 'd', e: { f: new Date(123), g: [2] } }, { filter: filterFunc });
// 'a=b&c=d&e[f]=123&e[g][0]=4'
qs.stringify({ a: 'b', c: 'd', e: 'f' }, { filter: ['a', 'e'] });
// 'a=b&e=f'
qs.stringify({ a: ['b', 'c', 'd'], e: 'f' }, { filter: ['a', 0, 2] });
// 'a[0]=b&a[2]=d'

You could also use filter to inject custom serialization for user defined types. Consider you're working with some api that expects query strings of the format for ranges:

https://domain.com/endpoint?range=30...70

For which you model as:

class Range {
    constructor(from, to) {
        this.from = from;
        this.to = to;
    }
}

You could inject a custom serializer to handle values of this type:

qs.stringify(
    {
        range: new Range(30, 70),
    },
    {
        filter: (prefix, value) => {
            if (value instanceof Range) {
                return `${value.from}...${value.to}`;
            }
            // serialize the usual way
            return value;
        },
    }
);
// range=30...70

Handling of null values

By default, null values are treated like empty strings:

var withNull = qs.stringify({ a: null, b: '' });
assert.equal(withNull, 'a=&b=');

Parsing does not distinguish between parameters with and without equal signs. Both are converted to empty strings.

var equalsInsensitive = qs.parse('a&b=');
assert.deepEqual(equalsInsensitive, { a: '', b: '' });

To distinguish between null values and empty strings use the strictNullHandling flag. In the result string the null values have no = sign:

var strictNull = qs.stringify({ a: null, b: '' }, { strictNullHandling: true });
assert.equal(strictNull, 'a&b=');

To parse values without = back to null use the strictNullHandling flag:

var parsedStrictNull = qs.parse('a&b=', { strictNullHandling: true });
assert.deepEqual(parsedStrictNull, { a: null, b: '' });

To completely skip rendering keys with null values, use the skipNulls flag:

var nullsSkipped = qs.stringify({ a: 'b', c: null}, { skipNulls: true });
assert.equal(nullsSkipped, 'a=b');

If you're communicating with legacy systems, you can switch to iso-8859-1 using the charset option:

var iso = qs.stringify({ æ: 'æ' }, { charset: 'iso-8859-1' });
assert.equal(iso, '%E6=%E6');

Characters that don't exist in iso-8859-1 will be converted to numeric entities, similar to what browsers do:

var numeric = qs.stringify({ a: '☺' }, { charset: 'iso-8859-1' });
assert.equal(numeric, 'a=%26%239786%3B');

You can use the charsetSentinel option to announce the character by including an utf8=✓ parameter with the proper encoding if the checkmark, similar to what Ruby on Rails and others do when submitting forms.

var sentinel = qs.stringify({ a: '☺' }, { charsetSentinel: true });
assert.equal(sentinel, 'utf8=%E2%9C%93&a=%E2%98%BA');

var isoSentinel = qs.stringify({ a: 'æ' }, { charsetSentinel: true, charset: 'iso-8859-1' });
assert.equal(isoSentinel, 'utf8=%26%2310003%3B&a=%E6');

Dealing with special character sets

By default the encoding and decoding of characters is done in utf-8, and iso-8859-1 support is also built in via the charset parameter.

If you wish to encode querystrings to a different character set (i.e. Shift JIS) you can use the qs-iconv library:

var encoder = require('qs-iconv/encoder')('shift_jis');
var shiftJISEncoded = qs.stringify({ a: 'こんにちは!' }, { encoder: encoder });
assert.equal(shiftJISEncoded, 'a=%82%B1%82%F1%82%C9%82%BF%82%CD%81I');

This also works for decoding of query strings:

var decoder = require('qs-iconv/decoder')('shift_jis');
var obj = qs.parse('a=%82%B1%82%F1%82%C9%82%BF%82%CD%81I', { decoder: decoder });
assert.deepEqual(obj, { a: 'こんにちは!' });

RFC 3986 and RFC 1738 space encoding

RFC3986 used as default option and encodes ' ' to %20 which is backward compatible. In the same time, output can be stringified as per RFC1738 with ' ' equal to '+'.

assert.equal(qs.stringify({ a: 'b c' }), 'a=b%20c');
assert.equal(qs.stringify({ a: 'b c' }, { format : 'RFC3986' }), 'a=b%20c');
assert.equal(qs.stringify({ a: 'b c' }, { format : 'RFC1738' }), 'a=b+c');

Security

Please email @ljharb or see https://tidelift.com/security if you have a potential security vulnerability to report.

qs for enterprise

Available as part of the Tidelift Subscription

The maintainers of qs and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

Acknowledgements

qs logo by NUMI:

NUMI Logo