Kapan menggunakan tanda kutip ganda atau tunggal dalam JavaScript?


1968

console.log("double"); vs. console.log('single');

Saya melihat semakin banyak perpustakaan JavaScript di luar sana menggunakan tanda kutip tunggal ketika menangani string. Apa alasan untuk menggunakan salah satunya? Saya pikir mereka cukup dipertukarkan.


125
mana yang lebih mudah dibaca? waspada ("Saatnya game"); atau waspada ('Ini waktu permainan');
Ryan Miller

591
Bagaimana dengan Ryan ini? alert("It's \"game\" time.");atau alert('It\'s "game" time.');?
Francisc

37
Jika tanda kutip tunggal selalu digunakan dan kadang-kadang tanda kutip ganda di mana literal berisi tanda kutip tunggal, maka kita harus mengetik tombol shift jauh lebih sedikit dan jari kelingking kiri kita akan memberi kita berkah. Tapi ya, seperti kata @arne, untuk JSON, kutipan ganda harus digunakan.
IsmailS

9
Kutipan tunggal lebih mudah dilakukan ketika Anda menggunakan keyboard Eropa (penawaran ganda adalah Shift + 2 yang tidak semanis mengetuk tombol tunggal dengan nyaman oleh jari kelingking kanan Anda).
Arne

38
@ Andre Tidak ada yang namanya "keyboard Eropa". Misalnya keyboard Jerman membutuhkan pergeseran untuk kedua jenis kutipan. (Tapi satu kutipan lebih mudah.)
ANeves

Jawaban:


1222

Alasan yang paling mungkin untuk penggunaan single vs double di perpustakaan yang berbeda adalah preferensi programmer dan / atau konsistensi API. Selain konsisten, gunakan yang paling cocok dengan string.

Menggunakan jenis kutipan lain sebagai literal:

alert('Say "Hello"');
alert("Say 'Hello'");

Ini bisa menjadi rumit:

alert("It's \"game\" time.");
alert('It\'s "game" time.');

Pilihan lain, baru dalam ES6, adalah Templat literal yang menggunakan back-tickkarakter:

alert(`Use "double" and 'single' quotes in the same string`);
alert(`Escape the \` back-tick character and the \${ dollar-brace sequence in a string`);

Literal template menawarkan sintaks yang bersih untuk: interpolasi variabel, string multi-line, dan banyak lagi.

Perhatikan bahwa JSON secara resmi ditentukan untuk menggunakan tanda kutip ganda, yang mungkin layak dipertimbangkan tergantung pada persyaratan sistem.


84
Poin penting yang perlu diperhatikan dengan semua konvensi kode - Tetapkan sekali dan tetap menggunakannya. TKI, jangan gunakan tanda kutip ganda di satu tempat dan tanda kutip tunggal di tempat lain.
Cerebrus

170
@ Cirebrus - Saya pikir fleksibilitas tidak masalah dengan yang ini. Tentu memilih gaya yang disukai, tetapi jika Anda perlu melepaskan diri dari gaya untuk menyelamatkan banyak kutipan dalam satu string. Saya akan baik-baik saja dengan itu.
Martin Clarke

5
Saya rasa tidak ada alasan untuk konsisten tentang hal itu. Tidak ada keuntungan untuk salah satu, dan saya tidak berpikir keterbacaan benar-benar terpengaruh apakah Anda menggunakan 'di satu tempat dan "di tempat lain.
cdmckay

2
@Olly Hicks, tes menarik !! Kutipan tunggal sebenarnya beberapa kali lebih cepat daripada tanda kutip ganda di Chrome 13 (OSX). Menarik ...
Ricket

12
Sedikit di luar topik, tetapi jika orang menggunakan tipografi yang benar, banyak diskusi tentang melarikan diri ini akan menjadi usang: alert('It’s “game” time')vs alert("It’s “game” time")- tidak masalah. Anda hanya perlu melarikan diri dalam kasus (jarang) di mana tanda prima tunggal atau ganda ', "sebenarnya sesuai.
jotaen

617

Jika Anda berurusan dengan JSON, harus dicatat bahwa secara ketat, string JSON harus dikutip ganda. Tentu, banyak perpustakaan mendukung tanda kutip tunggal juga, tetapi saya punya masalah besar di salah satu proyek saya sebelum menyadari bahwa satu kutipan string sebenarnya tidak sesuai dengan standar JSON.


5
Ini sangat relevan ketika bekerja dengan panggilan jQuery.ajax ke layanan ASP.NET (Layanan Web, Metode Halaman, atau MVC).
Schmuli

100
Nama-nama properti dalam string JSON harus dikutip ganda, tetapi string JSON secara keseluruhan dapat dikutip tunggal: var jsonString = '{"key1":"value1"}';(Bukannya saya menyarankan untuk membangun JSON secara manual.)
nnnnnn

51
Anda seharusnya tidak menulis JSON dengan tangan jika Anda bisa .stringify().
Camilo Martin

23
Ini di sini adalah argumen terbaik untuk selalu menggunakan tanda kutip ganda. JSON harus memiliki tanda kutip ganda. Jawaban lain sebagian besar memberikan saran untuk "konsisten", yang berarti jika ada bagian bahasa yang secara realistis memaksakan penawaran ganda, Anda harus konsisten menggunakan penawaran ganda itu.
Josh dari Qaribou

18
Ini juga relevan ketika bekerja dengan beberapa bahasa di mana hampir semua bahasa lainnya (Java, C, C ++, ...) menggunakan tanda kutip ganda untuk string dan tanda kutip tunggal untuk karakter. Saya lebih suka menggunakan kutipan yang sama di seluruh papan dan tetap dengan tanda kutip ganda untuk JS. Dengan sentuhan mengetik bertahun-tahun, kunci tambahan untuk menggeser tanda kutip ganda sama sekali tidak relevan, dan jika pengkodean Anda dibatasi oleh pengetikan Anda, maka Anda perlu berlatih mengetik dengan benar.
Lawrence Dol

336

Tidak ada solusi yang lebih baik ; namun, saya ingin berargumen bahwa tanda kutip ganda mungkin lebih diinginkan pada waktu:

  • Pendatang baru sudah tidak asing lagi dengan tanda kutip ganda dari bahasa mereka . Dalam bahasa Inggris, kita harus menggunakan tanda kutip ganda "untuk mengidentifikasi suatu bagian dari teks yang dikutip. Jika kita menggunakan kutipan tunggal ', pembaca dapat salah menafsirkannya sebagai kontraksi. Makna lain dari suatu bagian teks yang dikelilingi oleh 'menunjukkan makna 'sehari-hari'. Masuk akal untuk tetap konsisten dengan bahasa yang sudah ada sebelumnya, dan ini mungkin memudahkan pembelajaran dan interpretasi kode.
  • Kutipan ganda menghilangkan kebutuhan untuk keluar dari apostrof (seperti dalam kontraksi). Pertimbangkan string: "I'm going to the mall", vs versi sebaliknya melarikan diri: 'I\'m going to the mall'.
  • Kutipan ganda berarti string dalam banyak bahasa lain . Saat Anda mempelajari bahasa baru seperti Java atau C, tanda kutip ganda selalu digunakan. Di Ruby, PHP, dan Perl, string dengan tanda kutip tunggal menyiratkan tidak ada backslash yang lolos sementara tanda kutip ganda mendukungnya.

  • Notasi JSON ditulis dengan tanda kutip ganda.

Meskipun demikian, seperti yang dinyatakan orang lain, yang paling penting adalah tetap konsisten.


Poin pertama Anda tentang bahasa Inggris tidak selalu benar dan dapat berubah tergantung pada konvensi lokalitas / rumah. Bahan cetakan biasanya menggunakan tanda kutip tunggal untuk ucapan dan menggunakan format lain untuk blok besar teks yang dikutip. Makna 'sehari-hari' Anda bukanlah definisi kutipan yang berguna untuk penekanan. Ditambah lagi, pengguna bahasa Inggris pada umumnya sangat miskin dengan tanda kutip dan apostrof.
John Ferguson

2
@JohnFerguson, untuk alasan itu saja, mungkin diinginkan untuk menggunakan tanda kutip ganda untuk membuat perbedaan (antara apostrof dan kutipan petikan).
user1429980

Saya semua tentang pragmatisme. Karena kenyataan bahwa 1 dari 100 string yang saya ketik atau gunakan memiliki tanda kutip ganda, dan banyak, banyak lagi yang memiliki tanda kutip, saya menggunakan ganda. Namun, pada akhirnya, Anda harus menggunakan jenis kutipan yang 1) sudah digunakan dalam proyek jika Anda adalah pengembang baru untuk proyek tersebut, atau 2) menggunakan yang menurut Anda lebih masuk akal.
dudewad

Contoh kasus - apa yang baru saja saya ketik (ada beberapa tanda kutip, tidak ada tanda kutip ganda;)
dudewad

FWIW - ini adalah kutipan dari artikel Quora: quora.com/...
theUtherSide

118

Bagian 7.8.4 dari spesifikasi menjelaskan notasi string literal. Satu-satunya perbedaan adalah DoubleStringCharacter adalah "SourceCharacter tapi bukan double-quote" dan SingleStringCharacter adalah "SourceCharacter tetapi bukan single-quote". Jadi satu - satunya perbedaan dapat ditunjukkan dengan demikian:

'A string that\'s single quoted'

"A string that's double quoted"

Jadi itu tergantung pada berapa banyak kutipan yang ingin Anda lakukan. Jelas hal yang sama berlaku untuk tanda kutip ganda dalam string kutipan ganda.


@ Gareth: Saya tidak berbicara tentang spesifikasi, saya berbicara tentang kemungkinan dampak kinerja. stackoverflow.com/questions/242813/…
Mathias Bynens

jika Anda memasukkan cukup tanda kutip dalam kode Anda untuk menebus berapa kali Anda perlu menekan shift + 'maka Anda salah melakukannya.
SgtPooki

1
Bagaimana dengan "{\"name\": \"Peter\"}"vs '{"name": "Peter"}'? Memang, Anda bisa mengatakan ini adalah perbedaan yang sama, tetapi itu pasti akan mempengaruhi keputusan Anda dengan cara yang berbeda dari contoh di atas.
Trevor

@MathiasBynens - Itu pengamatan menarik yang belum relevan untuk setidaknya satu tahun, dan mungkin selama 6 tahun.
ArtOfWarfare

4
Satu harus menggunakan U + 2019 untuk apostrof, bukan vertikal-single-quote
JjG

95

Kutipan tunggal

Saya berharap tanda kutip ganda adalah standar, karena mereka membuat sedikit lebih masuk akal , tapi saya tetap menggunakan tanda kutip tunggal karena mereka mendominasi adegan.

Kutipan tunggal:

Tidak ada preferensi:

Kutipan ganda:


7
Crockford sekarang lebih suka tanda kutip ganda.
Adam Calvet Bohl

6
airbnb sekarang lebih suka tanda kutip ganda
Suraj Jain

15
@SurajJain Source? Panduan gaya Airbnb dan Google masih daftar tunggal sebagai pilihan.
Alec Mev

5
@ SurajJain Ah, ini adalah konfigurasi pemeriksa gaya kode, ditulis dalam JSON, yang tidak memungkinkan kutip tunggal sama sekali. Membacanya adalah cara yang bagus untuk membandingkan pilihan yang dibuat oleh proyek yang berbeda.
Alec Mev

2
Google sekarang lebih suka tanda kutip tunggal
GabrielOshiro

57

Saya ingin mengatakan perbedaannya murni gaya, tetapi saya benar-benar ragu. Perhatikan contoh berikut:

/*
   Add trim() functionality to JavaScript...
    1. By extending the String prototype
    2. By creating a 'stand-alone' function
   This is just to demonstrate results are the same in both cases.
*/

// Extend the String prototype with a trim() method
String.prototype.trim = function() {
 return this.replace(/^\s+|\s+$/g, '');
};

// 'Stand-alone' trim() function
function trim(str) {
 return str.replace(/^\s+|\s+$/g, '');
};

document.writeln(String.prototype.trim);
document.writeln(trim);

Di Safari, Chrome, Opera, dan Internet Explorer (diuji di IE7 dan IE8), ini akan mengembalikan yang berikut:

function () {
 return this.replace(/^\s+|\s+$/g, '');
}
function trim(str) {
 return str.replace(/^\s+|\s+$/g, '');
}

Namun, Firefox akan menghasilkan hasil yang sedikit berbeda:

function () {
    return this.replace(/^\s+|\s+$/g, "");
}
function trim(str) {
    return str.replace(/^\s+|\s+$/g, "");
}

Kutipan tunggal telah digantikan oleh tanda kutip ganda. (Perhatikan juga bagaimana indentasi spasi diganti dengan empat spasi.) Ini memberi kesan bahwa setidaknya satu browser mem-parsing JavaScript secara internal seolah-olah semuanya ditulis menggunakan tanda kutip ganda. Orang mungkin berpikir, Firefox membutuhkan waktu lebih sedikit untuk mem-parsing JavaScript jika semuanya sudah ditulis sesuai dengan 'standar' ini.

Yang, omong-omong, membuatku menjadi panda yang sangat sedih, karena aku pikir satu tanda kutip terlihat jauh lebih bagus dalam kode. Plus, dalam bahasa pemrograman lain, mereka biasanya lebih cepat digunakan daripada tanda kutip ganda, jadi itu hanya masuk akal jika hal yang sama berlaku untuk JavaScript.

Kesimpulan: Saya pikir kita perlu melakukan lebih banyak penelitian tentang ini.

Sunting: Ini mungkin menjelaskan hasil tes Peter-Paul Koch dari tahun 2003.

Tampaknya tanda kutip tunggal kadang - kadang lebih cepat di Explorer Windows (kira-kira 1/3 dari tes saya memang menunjukkan waktu respons lebih cepat), tetapi jika Mozilla menunjukkan perbedaan sama sekali, ia menangani tanda kutip ganda sedikit lebih cepat. Saya tidak menemukan perbedaan sama sekali di Opera.

Sunting 2014: Versi modern Firefox / Spidermonkey tidak melakukan ini lagi.


25
Jika itu sedikit lebih cepat di satu browser untuk melakukannya satu arah dan sedikit lebih cepat di browser lain untuk melakukannya dengan cara lain, sepertinya satu-satunya pedoman yang dapat kita ambil dari itu adalah bahwa kita harus melakukan apa pun yang kita suka lebih karena itu akan melukai beberapa pengguna dan membantu orang lain, dan jumlah perbedaan cenderung tidak terlihat. "Optimalisasi prematur ..." dan semua itu.
Andrew Hedges

2
Maaf komentar saya tidak lebih konstruktif. Saya hanya mengatakan bahwa bagaimana browser memilih untuk menampilkan representasi internal dari sintaks mungkin sangat sedikit hubungannya dengan bagaimana itu diuraikan dan oleh karena itu mungkin bukan alasan untuk lebih memilih satu jenis tanda kutip daripada yang lain. Data kinerja yang membandingkan waktu parse untuk kuotasi tunggal dan ganda di browser, di sisi lain, akan lebih menarik.
Chris Calo

1
Ini adalah jawaban yang luar biasa, istirahat dari yang lain yang hanya berkicau 'Mereka sama mereka' sama ... 'Anda mengatakan "Plus, dalam bahasa pemrograman lain, mereka biasanya lebih cepat digunakan daripada dua kali lipat. kutipan " , Bolehkah saya bertanya bahasa mana? Saya telah menggunakan bahasa reguler seperti Java dan C #, tidak pernah melihat satu pun selain JS yang menerima string literal dalam tanda kutip tunggal. Lampiran kutipan tunggal biasanya hanya digunakan untuk konstanta karakter (hanya satu karakter yang diizinkan).
ADTC

3
AFAIK ini diperbaiki di Firefox 17, Firefox digunakan untuk melakukan dekompilasi ketika melakukan .toStringtetapi sekarang mengembalikan salinan asli. Firefox modern tidak akan memiliki masalah ini.
Benjamin Gruenbaum

3
Tidak tahu tentang perbedaan kecepatan. Tetapi saya ingin mencatat bahwa "Ini memberi kesan bahwa setidaknya satu browser mem-parsing JavaScript secara internal seolah-olah semuanya ditulis menggunakan tanda kutip ganda." adalah omong kosong. Tidak diparsing seolah ditulis dengan tanda kutip ganda. Itu yang mengubah representasi internal (yang hanya menyimpan string, bukan tanda kutip) menjadi versi yang dapat dibaca manusia, yang kebetulan menggunakan satu set tanda kutip. Bagaimanapun, ini tampaknya telah berubah, sesuai komentar Benjamin.
subsub

32

Jika Anda melakukan inline JavaScript (bisa dibilang hal yang "buruk", tetapi menghindari diskusi itu) tanda kutip tunggal adalah satu -satunya pilihan Anda untuk literal string, saya percaya.

mis. ini berfungsi dengan baik:

<a onclick="alert('hi');">hi</a>

Tetapi Anda tidak dapat membungkus "hi" dengan tanda kutip ganda, melalui metode melarikan diri apa pun yang saya ketahui. Bahkan &quot;yang akan menjadi tebakan terbaik saya (karena Anda lolos dari kutipan dalam nilai atribut HTML) tidak berfungsi untuk saya di Firefox. \"tidak akan berfungsi karena pada titik ini Anda melarikan diri untuk HTML, bukan JavaScript.

Jadi, jika nama gim ini konsisten, dan Anda akan melakukan inline JavaScript di beberapa bagian aplikasi Anda, saya pikir satu tanda kutip adalah pemenangnya. Seseorang tolong perbaiki saya jika saya salah.


8
Setuju tentang menjadi hal yang buruk, tetapi jika itu harus dilakukan, saya cukup yakin pengkodean gaya-URL dapat digunakan misalnya <a onclick="alert(%22hi%22);">hi</a>- dari memori ini berfungsi, meskipun mungkin dalam atribut href sebagai gantinya<a href="javascript:alert(%22hi%22);">hi</a>
Graza

2
@PhiLho Anda benar tentang itu ... Saya berasumsi bahwa orang-orang menulis atribut HTML yang dikutip secara konvensional, dan tidak akan (1) grosir mengubah semuanya menjadi tanda kutip tunggal, atau (2) campuran-dan cocok atribut dikutip tunggal dan ganda. Tapi ya, Anda benar itu sah
Tom Lianza

4
@ Tom Lianza, pasti alert(&quot;hi&quot;)bukan JavaScript yang valid. Tetapi nilai atribut dikodekan. w3.org/TR/html4/intro/sgmltut.html#didx-attribute
Robert

4
Setuju dengan @Robert di sini. &quot;adalah cara yang tepat untuk menghindari kutip ganda di dalam atribut HTML. Ini berfungsi dengan baik di Firefox. @Denilson, XML (dan karenanya XHTML) memungkinkan kutipan tunggal dan ganda. Lihat AttValueliteral dalam spesifikasi XML di w3.org/TR/REC-xml/#d0e888 .
Chris Calo

1
@Pacener: Karena itu, eh, tidak salah. Ada konvensi dalam HTML untuk menempatkan atribut antara tanda kutip ganda.
Konrad Borowski

30

Secara teknis tidak ada perbedaan, itu hanya masalah gaya dan konvensi.

Douglas Crockford merekomendasikan penggunaan tanda kutip tunggal untuk string internal dan tanda kutip ganda untuk eksternal (oleh eksternal kami maksudkan itu ditampilkan kepada pengguna aplikasi, seperti pesan atau peringatan).

Saya pribadi mengikuti itu.

UPDATE: Tampaknya Tuan Crockford berubah pikiran dan sekarang merekomendasikan penggunaan tanda kutip ganda sepanjang :)


13
Douglas Crockford vs JQuery. Pilih racunmu.
Eric

Apa alasan Crockford untuk ini?
BadHorsie

1
Ini adalah konvensi yang saya ikuti. Ini lebih banyak pilihan pribadi. Saya suka menggunakan string yang dikutip tunggal untuk hal-hal internal seperti pemilih jQuery, dan / atau hal-hal seperti getElementById ('id') ;, Saya hanya suka tampilannya dengan tanda kutip tunggal. Tetapi, beralihlah ke tanda kutip ganda untuk teks eksternal, karena seringkali dapat berisi tanda kutip internal dalam teks. Selain itu, membuatnya mudah dikenali dan dibedakan antara string eksternal vs internal jika Anda mencoba menemukan kesalahan di satu atau yang lain.
adimauro

3
Pada April 2016, Douglas Crockford sekarang merekomendasikan penggunaan tanda kutip ganda saja, mengingat bahwa dalam praktiknya, banyak pengembang menemukan dikotomi internal versus eksternal sulit digunakan.
Thunderforge

27

Sebenarnya, tidak ada perbedaan makna; jadi pilihannya turun ke kenyamanan.

Berikut adalah beberapa faktor yang dapat memengaruhi pilihan Anda:

  • Gaya rumah: Beberapa grup pengembang sudah menggunakan satu konvensi atau yang lain.
  • Persyaratan sisi klien: Apakah Anda akan menggunakan penawaran dalam string? (Lihat jawaban Ady).
  • Bahasa sisi server: VB.Net orang mungkin memilih untuk menggunakan tanda kutip tunggal untuk skrip java sehingga skrip dapat dibangun di sisi server (VB.Net menggunakan tanda kutip ganda untuk string, sehingga string java-script mudah dibedakan. jika mereka menggunakan tanda kutip tunggal).
  • Kode perpustakaan: Jika Anda menggunakan perpustakaan yang menggunakan gaya tertentu, Anda dapat mempertimbangkan untuk menggunakan gaya yang sama sendiri.
  • Preferensi pribadi: Anda mungkin berpikir satu atau gaya lain terlihat lebih baik.

Tidak benar, 'adalah 00100111dalam biner, sementara "ini 00100010dalam biner. Dengan demikian, tanda kutip ganda mengambil setengah dari kekuatan untuk menyimpan sebagai tanda kutip tunggal. Itulah perbedaan di sana.

19

Mari kita lihat apa yang dilakukan referensi.

Di dalam jquery.js, setiap string dikutip ganda.

Jadi, mulai sekarang, saya akan menggunakan string yang dikutip ganda. (Saya menggunakan tunggal!)


11
Mengapa ini turun sebagai Ini adalah pertanyaan tentang gaya dan gaya terbaik adalah untuk konsisten dan mengikuti mereka yang datang sebelum Anda.
Eric

2
+1 Dokumentasi jQuery API juga. Ini adalah satu-satunya alasan saya memilih tanda kutip ganda. Secara pribadi, saya pikir jawaban bahwa "itu tergantung pada preferensi pribadi" agak cacat - yang terbaik untuk mengetahui konvensi yang banyak digunakan dan tetap menggunakannya. Dan karena saya mungkin ingin menyalin dan menempelkan contoh dari jQuery (langsung atau tidak langsung), saya tidak ingin harus mengganti tanda kutip setiap saat.
Steve Chambers

2
Mungkin jQuery gagal mengikuti orang-orang sebelum mereka (atau benar-benar tidak peduli, seperti kebanyakan pakar lainnya). ;)
James Wilkins

14

Tetap konsisten dalam apa yang Anda gunakan. Tetapi jangan mengecewakan tingkat kenyamanan Anda.

"This is my string."; // :-|
"I'm invincible."; // comfortable :)
'You can\'t beat me.'; // uncomfortable :(
'Oh! Yes. I can "beat" you.'; // comfortable :)
"Do you really think, you can \"beat\" me?"; // uncomfortable :(
"You're my guest. I can \"beat\" you."; // sometimes, you've to :P
'You\'re my guest too. I can "beat" you too.'; // sometimes, you've to :P

Pembaruan ES6

Menggunakan sintaks literal template .

`Be "my" guest. You're in complete freedom.`; // most comfort :D

13

Ini sebagian besar masalah gaya dan preferensi. Ada beberapa eksplorasi teknis yang agak menarik dan bermanfaat di jawaban lain, jadi mungkin satu-satunya hal yang dapat saya tambahkan adalah menawarkan sedikit nasihat duniawi.

  • Jika Anda coding di sebuah perusahaan atau tim, maka itu mungkin ide yang baik untuk mengikuti "gaya rumah".

  • Jika Anda sendirian meretas beberapa proyek sampingan, maka lihatlah beberapa pemimpin terkemuka di komunitas. Misalnya, Anda masuk ke Node.js. Lihatlah modul inti, mis. Underscore.js atau ekspres dan lihat konvensi apa yang mereka gunakan, dan pertimbangkan untuk mengikuti itu.

  • Jika kedua konvensi sama-sama digunakan, maka tunda
    preferensi pribadi Anda .

  • Jika Anda tidak memiliki preferensi pribadi, maka balikkan koin.

  • Jika Anda tidak memiliki koin, maka bir ada pada saya;)


13

Saya harap saya tidak menambahkan sesuatu yang jelas, tetapi saya telah berjuang dengan Django dan Ajax dan JSON dalam hal ini.

Dengan asumsi bahwa dalam kode HTML Anda Anda menggunakan tanda kutip ganda, seperti biasanya, saya sangat menyarankan untuk menggunakan tanda kutip tunggal untuk sisanya dalam JavaScript.

Jadi saya setuju dengan @ady tetapi dengan hati-hati.

Intinya adalah: Dalam JavaScript mungkin tidak masalah, tetapi segera setelah Anda menyematkannya ke dalam HTML atau sejenisnya, Anda mulai mendapatkan masalah. Anda harus tahu apa yang sebenarnya melarikan diri, membaca, melewati string Anda.

Kasus sederhana saya adalah:

tbox.innerHTML = tbox.innerHTML + '<div class="thisbox_des" style="width:210px;" onmouseout="clear()"><a href="https://stackoverflow.com/this/thislist/'
                   + myThis[i].pk +'"><img src="/site_media/'
                   + myThis[i].fields.thumbnail +'" height="80" width="80" style="float:left;" onmouseover="showThis('
                   + myThis[i].fields.left +','
                   + myThis[i].fields.right +',\''
                   + myThis[i].fields.title +'\')"></a><p style="float:left;width:130px;height:80px;"><b>'
                   + myThis[i].fields.title +'</b> '
                   + myThis[i].fields.description +'</p></div>'

Anda dapat melihat \ 'di bidang ketiga showThis.

Kutipan ganda tidak berfungsi!

Jelas mengapa, tetapi juga jelas mengapa kita harus berpegang pada tanda kutip tunggal ... .. kurasa ..

Kasing ini adalah penyematan HTML yang sangat sederhana, kesalahan ini dihasilkan oleh salinan / tempel sederhana dari kode JavaScript 'dikutip ganda'.

Jadi untuk menjawab pertanyaan:

Cobalah untuk menggunakan tanda kutip tunggal saat berada dalam HTML. Mungkin menyimpan beberapa masalah debug ...


1
Saya mengalami masalah yang sama dengan interpolasi string ES6 (backticks). Sistem build saya mengkompilasinya menjadi string yang dikutip ganda, yang memecah header Auth yang telah bekerja dengan tanda kutip tunggal!
Jay

12

Tidak yakin apakah ini relevan di dunia saat ini, tetapi tanda kutip ganda digunakan untuk konten yang perlu memiliki karakter kontrol diproses dan tanda kutip tunggal untuk string yang tidak.

Compiler akan menjalankan manipulasi string pada string yang dikutip ganda sambil meninggalkan string yang dikutip secara harfiah tidak tersentuh. Ini digunakan untuk mengarah ke pengembang 'baik' memilih untuk menggunakan tanda kutip tunggal untuk string yang tidak mengandung karakter kontrol suka \natau \0(tidak diproses dalam tanda kutip tunggal) dan tanda kutip ganda ketika mereka membutuhkan string diurai (dengan sedikit biaya dalam siklus CPU untuk memproses string).


14
Bukannya hal-hal dulu dilakukan dengan satu cara dan sekarang mereka dilakukan dengan cara lain. Bahasa yang berbeda menangani kutipan secara berbeda, dan beberapa berfungsi seperti yang Anda gambarkan. Tapi ini pertanyaan JavaScript . Kutipan tunggal dan ganda diperlakukan secara identik dalam JavaScript (kecuali untuk memungkinkan jenis kutipan lainnya digunakan dalam string tanpa melarikan diri). Tidak ada pertanyaan tentang tanda kutip ganda yang memungkinkan karakter kontrol atau interpolasi string. JavaScript tidak berfungsi seperti itu. Kontrol karakter dan urutan pelarian bekerja sama dengan jenis kutipan apa pun yang Anda gunakan.
Michael Geary

Sebagai mantan programmer, ini adalah apa yang saya terus pikirkan meskipun saya tahu itu tidak relevan di JS.
zkent

12

Jika Anda menggunakan jshint , itu akan menimbulkan kesalahan jika Anda menggunakan string kutipan ganda.

Saya menggunakannya melalui perancah Yeoman dari AngularJS tapi mungkin ada cara untuk mengkonfigurasi ini.

Omong-omong, ketika Anda menangani HTML ke dalam JavaScript, lebih mudah menggunakan satu kutipan:

var foo = '<div class="cool-stuff">Cool content</div>';

Dan setidaknya JSON menggunakan tanda kutip ganda untuk string reprensent.

Tidak ada cara sepele untuk menjawab pertanyaan Anda


Sudahkah implementasi jshint berubah? karena situs web demo tampaknya menerima tanpa membuang peringatan / kesalahan dan saya tidak dapat menemukan opsi untuk membatasi jshint untuk menggunakan keduanya. Mungkin jawaban ini sudah usang atau tidak akurat?
Lea Hayes

jika jshint memunculkan kesalahan untuk string yang dikutip ganda, itu benar-benar rusak. Standar JavaScript mendefinisikan apa yang benar dan bukan beberapa linter yang rusak.
Mecki

10

Berbicara tentang kinerja, kutipan tidak akan pernah menjadi hambatan Anda, namun kinerjanya sama dalam kedua kasus.

Berbicara tentang kecepatan pengkodean, jika Anda gunakan 'untuk membatasi string, Anda harus menghindari "tanda kutip. Anda lebih cenderung perlu menggunakan "di dalam string, misalnya:

//JSON Objects:
var jsonObject = '{"foo":"bar"}';
//HTML attributes:
document.getElementById("foobar").innerHTML = '<input type="text">';

Kemudian, saya lebih suka menggunakan 'untuk membatasi string, jadi saya harus melarikan diri lebih sedikit karakter.


10

Salah satu alasan (konyol) untuk menggunakan tanda kutip tunggal adalah karena mereka tidak mengharuskan Anda menekan tombol shift untuk mengetikkannya, sedangkan kuotasi ganda berlaku. (Saya berasumsi bahwa string rata-rata tidak perlu melarikan diri, yang merupakan asumsi yang masuk akal.) Sekarang, anggaplah setiap hari saya kode 200 baris kode. Mungkin dalam 200 baris saya punya 30 kutipan. Mungkin mengetikkan kutipan ganda membutuhkan waktu 0,1 detik lebih banyak daripada mengetikkan kutipan tunggal (karena saya harus menekan tombol shift). Kemudian pada hari tertentu, saya buang 3 detik. Jika saya kode dengan cara ini selama 200 hari setahun selama 40 tahun, maka saya telah menyia-nyiakan 6,7 jam dalam hidup saya. Bahan untuk dipikirkan.


1
Saya kira Anda hanya mengacu pada tata letak keyboard bahasa Inggris di sini ... Saya punya bahasa Jerman, saya harus menekan shift untuk keduanya. Lagi pula saya tidak mengerti mengapa menekan tombol shift menambah waktu pada proses. Saya menekan shift dengan tangan kiri, dan tekan tombol kutip dengan kanan. Itu terjadi pada saat yang sama, bagi saya tidak ada perbedaan.
codewandler

1
@codewandler Masih ada biaya untuk menekan tombol shift bahkan jika Anda dapat menekannya secara paralel dengan tombol ". Ini memaksa Anda untuk menjauhkan jari dari posisi default. Misalnya, misalkan Anda mengetik: var description = "This is a \"quick\" test";pada keyboard bahasa Inggris. Untuk keyboard bahasa Inggris, jari kelingking Anda harus bergerak dari tombol shift kiri ke tombol Q di baris atas alih-alih bergerak dari tombol A. ke tombol Q. Dengan kata lain, itu harus menempuh jarak dua kali jarak Saya tidak yakin di mana tombolnya ada pada keyboard Jerman, tapi saya yakin ada contoh analognya
John Kurlak

2
@codewandler Juga, harus mengetik shift, bahkan jika saya bisa melakukannya secara paralel, tidak mengizinkan jari kelingking kiri untuk mempersiapkan mengetik karakter berikutnya setelah "dalam apa pun yang Anda ketik.
John Kurlak

1
Gagasan "pemborosan waktu" agak konyol, tetapi gagasan strain yang kurang ergonomis (terutama di zaman sindrom terowongan karpel, dll.), Membuatnya menjadi keuntungan yang bagus, terutama dalam kasus-kasus di mana hal itu tidak penting. Diberikan lebih dari 1.000 baris kode per hari, ini bisa menghemat ratusan tikungan pinky harian.
Beejor

9

Meneliti pro dan kontra

Mendukung kutipan tunggal

  • Kurang kekacauan visual.
  • Menghasilkan HTML: Atribut HTML biasanya dibatasi oleh tanda kutip ganda.

elem.innerHTML = '<a href="' + url + '">Hello</a>';
Namun, kutipan tunggal sama legalnya dalam HTML.

elem.innerHTML = "<a href='" + url + "'>Hello</a>";

Selain itu, HTML sebaris biasanya merupakan anti-pola. Lebih suka templat.

  • Membuat JSON: Hanya tanda kutip ganda yang diizinkan di JSON.

myJson = '{ "hello world": true }';

Sekali lagi, Anda tidak harus membangun JSON dengan cara ini. JSON.stringify () seringkali cukup. Jika tidak, gunakan templat.

Mendukung kutip ganda

  • Doubles lebih mudah dikenali jika Anda tidak memiliki kode warna. Seperti di log konsol atau semacam pengaturan sumber tampilan.
  • Kesamaan dengan bahasa lain: Dalam pemrograman shell (Bash dll.), String literal yang dikutip tunggal ada, tetapi lolos tidak ditafsirkan di dalamnya. C dan Java menggunakan tanda kutip ganda untuk string dan tanda kutip tunggal untuk karakter.
  • Jika Anda ingin kode menjadi JSON yang valid, Anda perlu menggunakan tanda kutip ganda.

Mendukung keduanya

Tidak ada perbedaan antara keduanya dalam JavaScript. Karena itu, Anda dapat menggunakan apa pun yang nyaman saat ini. Misalnya, string literal berikut semuanya menghasilkan string yang sama:

    "He said: \"Let's go!\""
    'He said: "Let\'s go!"'
    "He said: \"Let\'s go!\""
    'He said: \"Let\'s go!\"'

Kutipan tunggal untuk string internal dan ganda untuk eksternal. Itu memungkinkan Anda untuk membedakan konstanta internal dari string yang akan ditampilkan kepada pengguna (atau ditulis ke disk dll.). Jelas, Anda harus menghindari menempatkan yang terakhir dalam kode Anda, tetapi itu tidak selalu bisa dilakukan.


8

Satu hal lagi yang mungkin ingin Anda pertimbangkan sebagai alasan untuk beralih dari tanda kutip ganda ke tanda kutip tunggal adalah peningkatan popularitas skrip sisi server. Saat menggunakan PHP, Anda dapat meneruskan variabel dan mem-parsing fungsi javascript menggunakan string dan variabel dalam PHP.

Jika Anda menulis string dan menggunakan tanda kutip ganda untuk PHP Anda, Anda tidak perlu melepaskan diri dari tanda kutip tunggal dan PHP akan secara otomatis mengambil nilai variabel untuk Anda.

Contoh: Saya perlu menjalankan fungsi javascript menggunakan variabel dari server saya.

public static function redirectPage( $pageLocation )
{
    echo "<script type='text/javascript'>window.location = '$pageLocation';</script>";
}

Ini menghemat banyak kerumitan karena harus berurusan dengan bergabung dengan string, dan saya dapat secara efektif memanggil javascript dari PHP. Ini hanya satu contoh, tetapi ini mungkin salah satu dari beberapa alasan mengapa programmer default ke tanda kutip tunggal dalam javascript.

Kutipan dari dokumen PHP : "Fitur paling penting dari string yang dikutip ganda adalah fakta bahwa nama variabel akan diperluas. Lihat parsing string untuk detailnya."


+1, saya melakukan ini dalam proyek MVC.Net saya sehingga tanda kutip ganda dari C # tidak mengganggu tanda kutip tunggal dari javascript, dan sebaliknya.
DCShannon

3
Saya pikir jika Anda menulis JavaScript ke halaman Anda dari metode kelas PHP Anda memiliki masalah yang lebih besar.
BadHorsie

6

Ada orang yang mengaku melihat perbedaan kinerja: utas milis lama . Tetapi saya tidak dapat menemukan satupun dari mereka yang dikonfirmasi.

Hal utama adalah melihat kutipan seperti apa (ganda atau tunggal) yang Anda gunakan di dalam string Anda. Ini membantu untuk menjaga jumlah lolos rendah. Misalnya ketika Anda bekerja dengan html di dalam string Anda, lebih mudah untuk menggunakan tanda kutip tunggal sehingga Anda tidak perlu melarikan diri dari semua tanda kutip ganda di sekitar atribut.


Meskipun atribut dapat juga dikelilingi dengan tanda kutip tunggal :)
Damir Zekić

Hak Anda, saya pikir xml dan xhtml meresepkan tanda kutip ganda di sekitar atribut, tetapi tanda kutip tunggal diizinkan untuk.
Michiel Overeem

6

Saya akan menggunakan tanda kutip ganda ketika tanda kutip tunggal tidak dapat digunakan dan sebaliknya:

"'" + singleQuotedValue + "'"
'"' + doubleQuotedValue + '"'

Dari pada:

'\'' + singleQuotedValue + '\''
"\"" + doubleQuotedValue + "\""

Bagaimana dengan string yang berisi kutipan tunggal dan ganda seperti O'rea "lly
sudhAnsu63

6

Tidak ada perbedaan antara tanda kutip tunggal dan ganda dalam JavaScript.

Spesifikasi itu penting:

Mungkin ada perbedaan kinerja, tetapi mereka sangat minimum dan dapat berubah setiap hari sesuai dengan implementasi browser. Diskusi lebih lanjut sia-sia kecuali jika aplikasi JavaScript Anda panjangnya ratusan ribu.

Ini seperti tolok ukur jika

a=b;

lebih cepat dari

a = b;

(ruang ekstra)

hari ini, di browser dan platform tertentu, dll.


2
tanpa spasi lebih cepat. lebih sedikit karakter untuk diurai dalam string. : p
pilavdzice

6

Saat menggunakan CoffeeScript saya menggunakan tanda kutip ganda. Saya setuju bahwa Anda harus memilih yang mana dan tetap menggunakannya. CoffeeScript memberi Anda interpolasi saat menggunakan tanda kutip ganda.

"This is my #{name}"

ES6 menggunakan tanda centang kembali (`) untuk string templat. Yang mungkin memiliki alasan yang bagus, tetapi ketika pengkodean dapat merepotkan untuk mengubah karakter string string dari tanda kutip atau tanda kutip ganda menjadi tanda centang kembali untuk mendapatkan fitur interpolasi. CoffeeScript mungkin tidak sempurna, tetapi menggunakan karakter literal string yang sama di mana-mana (tanda kutip ganda) dan selalu dapat menginterpolasi adalah fitur yang bagus.

`This is my ${name}`

Bagi saya tanda centang belakang adalah pemenang yang jelas dalam kontes ini, (hampir) tidak ada di dalam string teks yang umum, ditambah interpolasi var
Simone Poggi

5

Jika Anda melompat maju mundur antara JavaScript dan C #, yang terbaik adalah melatih jari Anda untuk konvensi umum yang merupakan tanda kutip ganda.


5

Saya sudah menjalankan berikut ini sekitar 20 kali. Dan tampaknya tanda kutip ganda sekitar 20% lebih cepat.

Bagian yang menyenangkan adalah, jika Anda mengubah bagian 2 dan bagian 1, tanda kutip tunggal sekitar 20% lebih cepat.

//Part1
var r='';
var iTime3 = new Date().valueOf();
for(var j=0; j<1000000; j++) {
    r+='a';
}
var iTime4 = new Date().valueOf();
alert('With single quote : ' + (iTime4 - iTime3));  

//Part 2                
var s="";
var iTime1 = new Date().valueOf();
for(var i=0; i<1000000; i++) {
    s += "a";
}
var iTime2 = new Date().valueOf();
alert('With double quote: ' + (iTime2 - iTime1));

31
Dengan kata lain, Anda telah menemukan bahwa kode selanjutnya berjalan tercepat. Ini adalah masalah ketika melakukan tolok ukur mikro. Anda harus memperhitungkan mesin JS yang mengoptimalkan kode saat dijalankan. (Anda akan melihat efek yang sama ketika membandingkan Jawa karena cara kerja JIT.)
David Phillips

4
Tanggal baru pertama lambat, tambahkan var dummy_date = new Date()ke awal
Lauri

1
Tingkat optimasi mikro di sini sangat konyol sehingga Anda juga bisa berpendapat bahwa tanda kutip tunggal lebih cepat untuk diketik, yang mengarah ke pengembangan yang lebih cepat.
Beejor

4

Sama sekali tidak ada perbedaan, jadi sebagian besar masalah selera dan apa yang ada di string (atau jika kode JS itu sendiri dalam string), untuk menjaga jumlah lolos rendah.

Legenda perbedaan kecepatan mungkin berasal dari dunia PHP, di mana kedua kutipan memiliki perilaku yang berbeda.


Dan Ruby, saya dapat menambahkan. Python memiliki perilaku yang sama dengan JavaScript: tidak ada perbedaan yang dibuat antara tanda kutip tunggal / ganda.
Damir Zekić

4

Setelah membaca semua jawaban yang mengatakan itu mungkin lebih cepat atau mungkin memiliki keuntungan, saya akan mengatakan kutipan ganda lebih baik atau mungkin lebih cepat juga karena kompilator penutupan Google mengonversi kutipan tunggal menjadi kutipan ganda.


Apakah Anda tahu mengapa itu terjadi?
ma11hew28

Saya tidak tahu Mungkin ini adalah konvensi pengkodean dan tidak ada yang istimewa.
Mohsen

4

Sekarang karena tahun 2020, kita harus mempertimbangkan opsi ketiga untuk Javascript: Backtick tunggal untuk semuanya.

Ini dapat digunakan di mana-mana, bukan kutipan tunggal atau ganda.

Ini memungkinkan Anda untuk melakukan semua hal!

  1. Cantumkan satu kutipan di dalamnya: `Sangat bagus!`
  2. Cantumkan tanda kutip ganda di dalamnya: `Ini benar-benar hebat!
  3. Gunakan interpolasi string: `Ini" $ {lebih baik} "daripada hebat!`
  4. Ini memungkinkan banyak baris: `

    Ini

    Membuat

    Javascript

    Lebih baik!

    `

Itu juga tidak menyebabkan kerugian kinerja saat mengganti dua lainnya: https://medium.com/javascript-in-plain-english/are-backticks-slower-than-other-strings-in-javascript-ce4abf9b9fa


3

Jika sumber JS Anda adalah:

elem.innerHTML="<img src='smily' alt='It\'s a Smily' style='width:50px'>";

Sumber HTML adalah:

<img src="smiley" alt="It's a Smiley" style="width:50px">

atau untuk HTML5

<img src=smiley alt="It's a Smiley" style=width:50px>

JS memungkinkan array seperti itu:

var arr=['this','that'];

Tetapi jika Anda mengencangkannya, itu akan menjadi alasan yang sesuai:

JSON=["this","that"]

Saya yakin ini butuh waktu.


3

Hanya dengan menambahkan 2 sen saya: Dalam bekerja dengan JS dan PHP beberapa tahun yang lalu, saya sudah terbiasa menggunakan tanda kutip tunggal sehingga saya dapat mengetikkan karakter escape ('\') tanpa harus menghindarinya juga. Saya biasanya menggunakannya ketika mengetik string mentah dengan path file, dll. ( Http://en.wikipedia.org/wiki/String_literal#Raw_strings )

Bagaimanapun, konvensi saya akhirnya menjadi penggunaan tanda kutip tunggal pada string mentah tipe pengenal, seperti if (typeof s == 'string') ...(di mana karakter escape tidak akan pernah digunakan - selamanya), dan tanda kutip ganda untuk teks , seperti "Hei, ada apa?". Saya juga menggunakan tanda kutip tunggal dalam komentar sebagai konvensi tipografis untuk menunjukkan nama pengenal. Ini hanya aturan praktis, dan saya memutuskan hanya jika diperlukan, seperti ketika mengetik string HTML '<a href="#"> like so <a>'(meskipun Anda bisa membalikkan tanda kutip di sini juga). Saya juga menyadari bahwa, dalam kasus JSON, tanda kutip ganda digunakan untuk nama - tetapi di luar itu, secara pribadi, saya lebih suka tanda kutip tunggal ketika melarikan diri tidak pernah diperlukan untuk teks di antara tanda kutip - seperti document.createElement('div').

Intinya, dan seperti yang telah disebutkan / disinggung oleh banyak orang, pilihlah sebuah konvensi, tetap padanya, dan hanya menyimpang jika diperlukan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.