Mari bercakap mengenai titik koma dalam JavaScript

Untuk menggunakannya, atau tidak menggunakannya ...

Tanda titik koma dalam JavaScript membahagikan komuniti. Ada yang lebih suka menggunakannya selalu, tidak kira apa pun. Orang lain suka mengelakkannya.

Saya membuat tinjauan di Twitter untuk menguji perairan, dan saya menjumpai banyak penyokong titik koma:

Setelah menggunakan titik koma selama bertahun-tahun, pada musim gugur 2017 saya memutuskan untuk mencuba mengelakkannya apabila saya boleh. Saya menyediakan Prettier untuk membuang titik koma secara automatik dari kod saya, melainkan ada konstruk kod tertentu yang memerlukannya.

Sekarang saya merasa wajar untuk mengelakkan titik koma, dan saya rasa kodnya kelihatan lebih baik dan lebih senang dibaca.

Ini semua mungkin kerana JavaScript tidak memerlukan titik koma. Apabila ada tempat di mana titik koma diperlukan, ia menambahkannya di belakang tabir.

Ini dipanggil Penyisipan Semikolon Automatik .

Penting untuk mengetahui peraturan yang memberi titik koma. Ini akan membolehkan anda mengelakkan menulis kod yang akan menghasilkan pepijat sebelum tidak berkelakuan seperti yang anda harapkan.

Peraturan Penyisipan Semikolon Automatik JavaScript

Penyusun JavaScript akan menambahkan titik koma secara automatik apabila, semasa penghuraian kod sumber, ia menemui situasi tertentu:

  1. apabila baris seterusnya bermula dengan kod yang memecahkan yang sekarang (kod dapat bertelur pada beberapa baris)
  2. apabila baris seterusnya bermula dengan a }, menutup blok semasa
  3. apabila akhir fail kod sumber tercapai
  4. apabila terdapat returnpernyataan pada barisnya sendiri
  5. apabila terdapat breakpernyataan pada barisnya sendiri
  6. apabila terdapat throwpernyataan pada barisnya sendiri
  7. apabila terdapat continuepernyataan pada barisnya sendiri

Contoh kod yang tidak melakukan apa yang anda fikirkan

Berdasarkan peraturan tersebut, berikut adalah beberapa contoh.

Ambil ini:

const hey = 'hey'const you = 'hey'const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Anda akan mendapat ralat Uncaught TypeError: Cannot read property 'forEach' of undefinedkerana berdasarkan peraturan 1, JavaScript cuba menafsirkan kodnya sebagai

const hey = 'hey';const you = 'hey';const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Bahagian kod ini:

(1 + 2).toString()

cetakan "3".

const a = 1const b = 2const c = a + b(a + b).toString()

Sebaliknya, ini menimbulkan TypeError: b is not a functionpengecualian, kerana JavaScript cuba menafsirkannya sebagai

const a = 1 const b = 2 const c = a + b(a + b).toString()

Contoh lain berdasarkan peraturan 4:

(() => { return { color: 'white' }})()

Anda menjangkakan nilai pengembalian fungsi yang segera dipanggil ini menjadi objek yang mengandungi colorharta benda, tetapi tidak. Sebaliknya, ini undefinedkerana JavaScript memasukkan titik koma setelahnya return.

Sebaliknya anda harus meletakkan pendakap pembuka tepat selepas return:

(() => { return { color: 'white' }})()

Anda fikir kod ini menunjukkan '0' dalam amaran:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

tetapi menunjukkan 2 sebagai gantinya, kerana JavaScript (setiap peraturan 1) menafsirkannya sebagai:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

Kesimpulannya

Berhati-hati - sebilangan orang sangat berpandangan titik koma. Saya tidak peduli, jujur. Alat ini memberi kita pilihan untuk tidak menggunakannya, jadi kita dapat mengelakkan titik koma jika kita mahu.

Saya tidak mencadangkan apa-apa di satu pihak atau yang lain. Cukup buat keputusan anda sendiri berdasarkan apa yang sesuai untuk anda.

Walau apa pun, kita hanya perlu memberi perhatian sedikitpun, walaupun sebahagian besar senario asas tersebut tidak pernah muncul dalam kod anda.

Pilih beberapa peraturan:

  • Berhati-hati dengan returnpenyataan. Jika anda kembali sesuatu, menambahnya pada baris yang sama sebagai kembali (sama untuk break, throw, continue)
  • Jangan sekali-kali memulakan garis dengan tanda kurung, kerana itu mungkin digabungkan dengan baris sebelumnya untuk membentuk panggilan fungsi, atau rujukan elemen array

Dan akhirnya, sentiasa menguji kod anda untuk memastikan ia melakukan apa yang anda mahukan.

Saya menerbitkan 1 tutorial pengaturcaraan percuma setiap hari di flaviocopes.com, lihat!

Awalnya diterbitkan di flaviocopes.com.