javascript - 查询字符串参数的约定

Question

当我有这样的 url 时:

http://server/site?firstname=Jack&lastname=Daniels

我知道在我的 JavaScript 中查询 firstname 应该返回“Jack”。

但是在以下情况下查询 firstname 应该返回什么:

http://server/site?lastname=Daniels
http://server/site?firstname&lastname=Daniels
http://server/site?firstname=&lastname=Daniels

[编辑] 回答一些评论:以上都是合法的查询字符串，我的问题不是关于如何检索参数而是如何解释它们。

作为记录，我使用以下涵盖所有情况的正则表达式解析查询字符串:

/([^?=&;]+)(?:=([^&;]*))?/g

显然有 a very popular question on how to retrieve querystring parameters ，但答案不正确(或者至少没有解决边缘情况)。

[更新] 我的选择基于@Bergi 和@zzzzBov 的回答:

http://server/site?lastname=Daniels                => firstname: undefined
http://server/site?firstname&lastname=Daniels      => firstname: true
http://server/site?firstname=&lastname=Daniels     => firstname: ""
http://server/site?firstname=Jack&lastname=Daniels => firstname: "Jack"

副作用是我不得不稍微修改我的正则表达式，因为上面的规则需要捕获 = 符号:

/([^?=&;]+)(=[^&;]*)?/g

Answer 1

But what should the query for firstname return in the following cases:

http://server/site?lastname=Daniels
http://server/site?firstname&lastname=Daniels
http://server/site?firstname=&lastname=Daniels

查询字符串可以很容易地用 JavaScript 中的对象表示法来表示。只需设置对象的查询字符串中存在的键即可。

这意味着对于?lastname=Daniels，生成的对象应该是:

{
    lastname: 'Daniels'
}

在存在键但未给出值(无等号)的情况下，应将键设置为 null 值，表示“无值”。

这意味着对于?firstname&lastname=Daniels，生成的对象应该是:

{
    firstname: null,
    lastname: 'Daniels'
}

在存在键且提供的值为空(等号)的情况下，该值实际上是空字符串。

这意味着对于?firstname=&lastname=Daniels，生成的对象应该是:

{
    firstname: '',
    lastname: 'Daniels'
}

还有一个经常被忽视的情况，即多次使用同一个 key 。在传统的查询字符串语法(不是 PHP)中，键可以按原样多次使用来表示一个数组。

这意味着对于 ?foo=bar&foo=baz 生成的对象应该是:

{
    foo: [
        'bar',
        'baz'
    ]
}

<旁白>

在 PHP 领域，用于数组的键以 [] 为后缀:

`?foo[]=bar&foo[]=baz`

PHP 将自动转换查询字符串服务器端，这样:

$_GET['foo'] = array('bar', 'baz')

回到最初的问题，这意味着:

• ?lastname=Daniels 的 firstname 键值为 undefined。
• ?firstname&lastname=Daniels 的 firstname 键值为 null。
• ?firstname=&lastname=Daniels 的 firstname 键值为 ''。

对于根据键的存在将键用作 bool 值的情况，您应该检查对象是否设置了键(并完全忽略该值，因为它无关紧要)。

通常这是通过 obj.hasOwnProperty('key') 完成的，但是由于对象实际上更像是一个哈希，Object.prototype.hasOwnProperty.call(obj, 'key') is preferrable ，可以抽象成一个has函数:

has(obj, key) {
    return Object.prototype.hasOwnProperty.call(obj, key);
}

如果您使用 underscore.js , 那么你可以使用 _.has(obj, key)