Parunāsim par semikoliem JavaScript valodā

Lai tos izmantotu vai neizmantotu ...

JavaScript semikoli dala kopienu. Daži izvēlas tos izmantot vienmēr, neatkarīgi no tā. Citiem patīk no tiem izvairīties.

Es testēju čivināt Twitter, lai pārbaudītu ūdeņus, un es atradu daudzus semikolu atbalstītājus:

Gadiem ilgi lietojot semikolus, 2017. gada rudenī es nolēmu mēģināt izvairīties no tiem, kad vien varēju. Es iestatīju Prettier, lai automātiski noņemtu semikolus no mana koda, ja vien nav noteikta koda konstrukcijas, kas tos pieprasītu.

Tagad es uzskatu, ka ir dabiski izvairīties no semikoliem, un es domāju, ka kods izskatās labāk un ir tīrāks lasīšanai.

Tas viss ir iespējams, jo JavaScript nav stingri nepieciešami semikoli. Ja ir vieta, kur vajadzīgs semikols, tas to pievieno aizkulisēs.

To sauc par automātisko semikolu ievietošanu .

Ir svarīgi zināt likumus, kas darbojas ar semikoliem. Tas ļaus jums izvairīties no koda rakstīšanas, kas radīs kļūdas, pirms tas neuzvedas tā, kā jūs gaidījāt.

JavaScript automātiskās semikola ievietošanas kārtulas

JavaScript parsētājs automātiski pievienos semikolu, kad avota koda parsēšanas laikā tas atradīs šīs konkrētās situācijas:

  1. kad nākamā rinda sākas ar kodu, kas pārtrauc pašreizējo (kods var nārstot vairākās rindās)
  2. kad nākamā rinda sākas ar a }, aizverot pašreizējo bloku
  3. kad ir sasniegts avota koda faila beigas
  4. kad ir returnpaziņojums uz savas līnijas
  5. kad ir breakpaziņojums uz savas līnijas
  6. kad ir throwpaziņojums uz savas līnijas
  7. kad ir continuepaziņojums uz savas līnijas

Kodu piemēri, kas nedara to, ko jūs domājat

Pamatojoties uz šiem noteikumiem, šeit ir daži piemēri.

Ņem šo:

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

Jūs saņemsiet kļūdu, Uncaught TypeError: Cannot read property 'forEach' of undefinedjo, pamatojoties uz kārtulu 1, JavaScript mēģina interpretēt kodu kā

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

Šis koda gabals:

(1 + 2).toString()

izdrukas "3".

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

Tā vietā tas rada TypeError: b is not a functionizņēmumu, jo JavaScript mēģina to interpretēt kā

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

Vēl viens piemērs, kas balstīts uz 4. kārtulu:

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

Jūs varētu sagaidīt, ka šīs uzreiz izsauktās funkcijas atgriešanās vērtība ir objekts, kas satur colorrekvizītu, taču tas tā nav. Tā vietā tas ir undefined, jo JavaScript aiz burta ievieto semikolu return.

Tā vietā jums vajadzētu ievietot atvēršanas kronšteinu tūlīt pēc return:

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

Jūs domājat, ka šis kods brīdinājumā norāda “0”:

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

bet tā vietā tiek rādīts 2, jo JavaScript (katram noteikumam 1) to interpretē šādi:

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

Secinājums

Esiet piesardzīgs - daži cilvēki ļoti vērtē semikolus. Man vienalga, godīgi. Šis rīks dod mums iespēju to neizmantot, tāpēc, ja vēlaties, mēs varam izvairīties no semikoliem.

Es neiesaku neko vienā vai otrā pusē. Vienkārši pieņem pats savu lēmumu, pamatojoties uz to, kas tev der.

Neatkarīgi no tā, mums vienkārši jāpievērš nedaudz uzmanības, pat ja lielākoties šie pamata scenāriji nekad neparādās jūsu kodā.

Izvēlieties dažus noteikumus:

  • Esiet piesardzīgs ar returnpaziņojumiem. Ja jūs atgriezties kaut, pievienojiet to uz vienas līnijas, kā atgriešanos (pats break, throw, continue)
  • Nekad nesāciet rindu ar iekavām, jo ​​tās var būt sasaistītas ar iepriekšējo rindu, lai izveidotu funkcijas izsaukumu vai masīva elementa atsauci

Un galu galā vienmēr pārbaudiet kodu, lai pārliecinātos, ka tas dara to, ko vēlaties.

Es publicēju 1 bezmaksas programmēšanas apmācību dienā vietnē flaviocopes.com, pārbaudiet to!

Sākotnēji publicēts vietnē flaviocopes.com.