Qual é a diferença entre chaves de objeto com aspas e sem aspas?


209

Existe alguma diferença entre

obj = {'foo': 'bar'} 

e

obj = {foo: 'bar'}

Percebi que você não pode usar -a chave quando não uso as aspas. Mas isso realmente faz diferença? Se sim, qual?

Respostas:


136

Não, as aspas não fazem diferença (a menos que, como você observou, você queira usar uma chave que não seja um identificador JavaScript válido).

Como uma nota lateral, o formato de troca de dados JSON faz requer aspas em torno identificadores (e que não permitem que as aspas simples).


88
Na verdade, as aspas podem fazer a diferença se você usar um literal numérico como um nome de propriedade. Por exemplo, obj = { 12e34: true };não é o mesmo que obj = { '12e34': true };. O primeiro exigiria o acesso à propriedade obj['1.2e+35'], enquanto o último você usaria obj['12e34']. Veja minha resposta para mais detalhes.
Mathias Bynens 6/03/12

1
É verdade, mas seria brilhante se as aspas duplas fossem opcionais, com um primeiro caractere + alfanumérico e alguns fãs de espaço em branco também conhecido como abas ou espaços invisíveis? ótimo para dados não profundamente aninhados.
Jason Sebring

124

Em Nomes de propriedades não citados / chaves de objeto em JavaScript , minha redação sobre o assunto:

As cotações só podem ser omitidas se o nome da propriedade for um literal numérico ou um nome de identificador válido .

[...]

A notação de colchete pode ser usada com segurança para todos os nomes de propriedades.

[...]

A notação de ponto pode ser usada apenas quando o nome da propriedade é um nome de identificador válido.

Observe que palavras reservadas podem ser usadas como nomes de propriedades não citadas no ES5. No entanto, para compatibilidade retroativa com o ES3, sugiro citá-los de qualquer maneira.

Também criei uma ferramenta que informa se qualquer nome de propriedade pode ser usado sem aspas e / ou com notação de ponto. Experimente em mothereff.in/js-properties .

Captura de tela


Esta ferramenta foi um salva-vidas. Obrigado por postar isso.
Chris Christensen

Eu estava saindo de um penhasco, prestes a cair em uma ladeira muito íngreme, fugindo em direção a uma morte certa, completa e sangrenta; mas, infelizmente, cliquei em um link na sua resposta, que tinha uma ferramenta JS muito simples, o que me impediu de cair daquele penhasco. Esta ferramenta foi um salva-vidas.
19419 Andrew

8

Não há diferença aqui. Apenas uma questão de estilo. Uma das razões para fazer isso é poder usar 'super' ou 'classe' como chave, pois são palavras-chave reservadas.

Algumas pessoas podem ficar tentadas a passar uma cadeia de caracteres com espaço em branco e então chamar o ['I can have white space']. Mas eu chamaria isso de má prática.


3

Não, não para javascript. No entanto, alguns analisadores JSON falharão quando as aspas ao redor das chaves não estiverem presentes.


35
Chaves sem aspas são inválidas em JSON.
Ned Batchelder

1

Existem algumas situações em que são diferentes. Por exemplo, se você estiver usando o jQuery e estiver fazendo uma lista de parâmetros a serem transmitidos ao chamar o comando jQuery $ () para criar um elemento, as palavras entre aspas serão transformadas em parâmetros e as palavras não entre aspas serão transformadas em funções. Por exemplo, "size" definirá o atributo size do objeto e size (sem aspas) chamará a função size () no objeto. Veja jQuery () , na parte inferior:

Embora o segundo argumento seja conveniente, sua flexibilidade pode levar a consequências não intencionais (por exemplo, $ (" <input>", {size: "4"}) chamando o método .size () em vez de definir o atributo size). O bloco de código anterior poderia, portanto, ser escrito como:


Não acho que esse exemplo diga o que você pensa. O problema que você citou é porque o jQuery possui um método chamado size, e o conflito entre o tamanho do método e o tamanho do atributo é resolvido selecionando o método. Existem casos no jQuery em que a passagem de um valor como uma sequência ou outro tipo causa uma alteração no comportamento, mas nunca é necessário definir uma propriedade com um nome de propriedade válido entre aspas e não entre aspas.
Alex Weitzer
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.