Apa perbedaan antara kunci objek dengan tanda kutip dan tanpa tanda kutip?

209

Apakah ada perbedaan di antara keduanya

obj = {'foo': 'bar'}

dan

obj = {foo: 'bar'}

Saya perhatikan bahwa Anda tidak dapat menggunakan -kunci ketika saya tidak menggunakan tanda kutip. Tetapi apakah itu benar-benar membuat perbedaan? Jika ya, yang mana?

javascript meo
sumber

Jawaban:

136

Tidak, tanda kutip tidak membuat perbedaan (kecuali, seperti yang Anda catat, Anda ingin menggunakan kunci yang bukan pengidentifikasi JavaScript yang valid).

Sebagai catatan tambahan, format pertukaran data JSON memang membutuhkan tanda kutip ganda di sekitar pengidentifikasi (dan tidak mengizinkan tanda kutip tunggal).

bdukes
sumber
88
Sebenarnya, tanda kutip dapat membuat perbedaan jika Anda menggunakan numerik literal sebagai nama properti. Misalnya, obj = { 12e34: true };tidak sama dengan obj = { '12e34': true };. Yang pertama akan meminta Anda untuk mengakses properti melalui obj['1.2e+35'], sedangkan untuk yang terakhir Anda akan gunakan obj['12e34']. Lihat jawaban saya untuk lebih jelasnya.
Mathias Bynens
1
Benar tapi itu akan brilian jika tanda kutip ganda adalah opsional diberikan karakter pertama az + alpha-numeric dan mungkin cukup banyak penggemar spasi putih alias spasi atau tab tak terlihat? bagus untuk data yang tidak terlalu bersarang.
Jason Sebring
124

Dari Nama properti / kunci objek yang tidak dikutip dalam JavaScript , tulisan saya tentang subjek:

Kutipan hanya dapat dihilangkan jika nama properti adalah literal numerik atau nama pengenal yang valid .

[...]

Notasi braket dapat digunakan dengan aman untuk semua nama properti.

[...]

Notasi titik hanya dapat digunakan ketika nama properti adalah nama pengidentifikasi yang valid.

Perhatikan bahwa kata-kata yang dipesan diperbolehkan untuk digunakan sebagai nama properti yang tidak dikutip dalam ES5. Namun, untuk kompatibilitas dengan ES3, saya sarankan mengutipnya.

Saya juga membuat alat yang akan memberi tahu Anda jika ada nama properti yang dapat digunakan tanpa tanda kutip dan / atau dengan notasi titik. Cobalah di mothereff.in/js-properties .

Tangkapan layar

Mathias Bynens
sumber
Alat ini adalah penyelamat. Terima kasih telah memposting ini.
Chris Christensen
Aku sedang dalam perjalanan menuruni tebing, akan jatuh ke lereng yang sangat curam, menghanyutkan menuju kematian yang pasti, sepenuhnya, berdarah; tapi sayangnya, saya mengklik tautan dalam jawaban Anda, yang memiliki alat JS sangat sederhana di dalamnya, yang mencegah saya jatuh dari tebing itu. Alat ini adalah penyelamat.
Andrew
8

Tidak ada perbedaan di sini. Hanya masalah gaya. Salah satu alasan untuk melakukan ini adalah karena dapat menggunakan 'super' atau 'kelas' sebagai kunci karena kata kunci tersebut dilindungi undang-undang.

Beberapa orang mungkin tergoda untuk menyerahkan string dengan spasi putih lalu memanggil o ['Saya dapat memiliki spasi putih]. Tetapi saya akan menyebut praktik buruk itu.

Raynos
sumber
3

Tidak, tidak untuk javascript. Namun, beberapa parser JSON akan gagal ketika tanda kutip di sekitar kunci tidak ada.

01001111
sumber
35
Kunci tanpa tanda kutip tidak valid di JSON.
Ned Batchelder
1

Ada beberapa situasi di mana mereka berbeda. Misalnya, jika Anda menggunakan jQuery, dan Anda membuat daftar parameter untuk dilewati ketika memanggil perintah jQuery $ () untuk membuat elemen, kata-kata yang dikutip diubah menjadi parameter, dan kata-kata yang tidak dikutip diubah menjadi fungsi. Misalnya, "ukuran" akan mengatur atribut ukuran objek, dan ukuran (tanpa tanda kutip), akan memanggil fungsi size () pada objek. Lihat jQuery () , di dekat bagian bawah:

Sementara argumen kedua nyaman, fleksibilitasnya dapat menyebabkan konsekuensi yang tidak diinginkan (misalnya $ (" <input>", {size: "4"}) memanggil metode .size () alih-alih mengatur atribut ukuran). Dengan demikian, blok kode sebelumnya dapat ditulis sebagai:

spekary
sumber
Saya tidak berpikir bahwa contoh mengatakan apa yang Anda pikirkan dikatakan. Masalah yang Anda kutip adalah karena jQuery memiliki metode yang disebut ukuran, dan konflik antara ukuran metode dan ukuran atribut diselesaikan dengan memilih metode. Ada kasus di jQuery di mana melewati Nilai sebagai string atau tipe lain menyebabkan perubahan perilaku, tetapi tidak pernah mendefinisikan properti dengan nama properti yang valid dalam tanda kutip vs tidak dalam tanda kutip.
Alex Weitzer