Quelle est la différence entre les clés d'objet avec guillemets et sans guillemets?

209

Y a-t-il une différence entre

obj = {'foo': 'bar'}

et

obj = {foo: 'bar'}

J'ai remarqué que vous ne pouvez pas utiliser -la clé lorsque je n'utilise pas les guillemets. Mais cela fait-il vraiment une différence? Si oui, lequel?

javascript

— meo
source

136

Non, les guillemets ne font aucune différence (sauf si, comme vous l'avez noté, vous souhaitez utiliser une clé qui n'est pas un identifiant JavaScript valide).

Comme une note de côté, le format d'échange de données JSON ne nécessitent des guillemets doubles autour des identifiants (et ne pas permettre à des guillemets simples).

— bdukes
source

88

En fait, les guillemets peuvent faire une différence si vous utilisez un littéral numérique comme nom de propriété. Par exemple, obj = { 12e34: true };n'est pas le même que obj = { '12e34': true };. Le premier vous obligerait à accéder à la propriété par le biais obj['1.2e+35'], tandis que pour le second, vous utiliseriez obj['12e34']. Voir ma réponse pour plus de détails.

— Mathias Bynens

1

Certes, mais ce serait génial si les guillemets doubles étaient facultatifs étant donné un premier caractère az + alphanumérique et peut-être quelques fans d'espaces blancs aka espaces ou tabulations invisibles? idéal pour les données pas profondément imbriquées.

— Jason Sebring

124

À partir des noms de propriété / clés d'objet non cotés en JavaScript , mon article sur le sujet:

Les guillemets ne peuvent être omis que si le nom de la propriété est un littéral numérique ou un nom d'identifiant valide .

[…]

La notation entre parenthèses peut être utilisée en toute sécurité pour tous les noms de propriété.

[…]

La notation par points ne peut être utilisée que lorsque le nom de la propriété est un nom d'identifiant valide.

Notez que les mots réservés peuvent être utilisés comme noms de propriété sans guillemets dans ES5. Cependant, pour une compatibilité descendante avec ES3, je suggère de les citer quand même.

J'ai également créé un outil qui vous dira si un nom de propriété donné peut être utilisé sans guillemets et / ou avec notation par points. Essayez-le sur mothereff.in/js-properties .

— Mathias Bynens
source

Cet outil nous a sauvé la vie. Merci d'avoir posté ça.

— Chris Christensen

J'étais en train de descendre d'une falaise, sur le point de tomber sur une pente très raide, en me débattant vers une mort certaine, totale et sanglante; mais hélas, j'ai cliqué sur un lien dans votre réponse, qui contenait un outil JS très simple, qui m'a empêché de tomber de cette falaise. Cet outil nous a sauvé la vie.

— Andrew

8

Il n'y a aucune différence ici. Juste une question de style. L'une des raisons pour cela est de pouvoir utiliser «super» ou «classe» comme clé car ce sont des mots clés réservés.

Certaines personnes pourraient être tentées de passer une chaîne avec des espaces, puis d'appeler o [«Je peux avoir des espaces»] Mais j'appellerais cette mauvaise pratique.

— Raynos
source

3

Non, pas en javascript. Cependant, certains analyseurs JSON échouent lorsque les guillemets autour des clés ne sont pas présents.

— 01001111
source

35

Les clés sans guillemets ne sont pas valides dans JSON.

— Ned Batchelder

1

Il y a des situations où ils sont différents. Par exemple, si vous utilisez jQuery et que vous créez une liste de paramètres à passer lors de l'appel de la commande jQuery $ () pour créer un élément, les mots entre guillemets sont transformés en paramètres et les mots sans guillemets sont transformés en fonctions. Par exemple, "taille" définira l'attribut taille de l'objet, et taille (sans guillemets), appellera la fonction taille () sur l'objet. Voir jQuery () , près du bas:

Bien que le deuxième argument soit pratique, sa flexibilité peut entraîner des conséquences inattendues (par exemple $ (" <input>", {size: "4"}) appelant la méthode .size () au lieu de définir l'attribut size). Le bloc de code précédent pourrait donc être écrit à la place comme:

— spekary
source

Je ne pense pas que cet exemple indique ce que vous pensez qu'il dit. Le problème que vous avez cité est dû au fait que jQuery a une méthode appelée taille et que le conflit entre la taille de la méthode et la taille de l'attribut est résolu en sélectionnant la méthode. Il existe des cas dans jQuery où le passage d'une valeur sous forme de chaîne ou d'un autre type provoque un changement de comportement, mais jamais de la définition d'une propriété avec un nom de propriété valide entre guillemets et non entre guillemets.

— Alex Weitzer