Topik dalam bagian terjemahan tutorial JavaScript ini adalah penanganan perkecualian, fitur titik koma otomatis, dan literal templat.
→
Bagian 1: program pertama, fitur bahasa, standar→
Bagian 2: gaya kode dan struktur program→
Bagian 3: variabel, tipe data, ekspresi, objek→
Bagian 4: fitur→
Bagian 5: array dan loop→
Bagian 6: pengecualian, titik koma, literal wildcard→
Bagian 7: mode ketat, kata kunci ini, acara, modul, perhitungan matematis→
Bagian 8: Tinjauan Umum Fitur ES6→
Bagian 9: Gambaran Umum Standar ES7, ES8, dan ES9
Penanganan pengecualian
Ketika masalah terjadi selama eksekusi kode, itu dinyatakan sebagai pengecualian dalam JavaScript. Jika Anda tidak mengambil tindakan untuk menangani pengecualian, maka, ketika itu terjadi, program berhenti, dan pesan kesalahan ditampilkan di konsol.
Pertimbangkan potongan kode berikut.
let obj = {value: 'message text'} let notObj let fn = (a) => a.value console.log(fn(obj))
Di sini kita memiliki fungsi yang kami rencanakan untuk digunakan untuk memproses objek yang memiliki properti
value . Dia mengembalikan properti ini. Jika Anda menggunakan fungsi ini untuk tujuan yang dimaksudkan, yaitu, untuk mentransfer ke sana objek yang dirancang untuk bekerja dengannya, tidak ada kesalahan akan dihasilkan saat dijalankan. Tetapi jika Anda mengirimkan sesuatu yang tidak pantas untuk itu, dalam kasus kami, variabel yang dinyatakan tetapi tidak diinisialisasi, maka kesalahan terjadi ketika Anda mencoba mengakses properti
value dari nilai yang
undefined . Pesan kesalahan akan muncul di konsol, eksekusi program akan berhenti.
Begini tampilannya saat Anda menjalankan kode ini di Node.js.
Pengecualian TypeError di Node.jsJika sesuatu seperti ini terjadi pada kode JS halaman web, pesan serupa akan dikirim ke konsol browser. Jika ini terjadi dalam program nyata, katakanlah - dalam kode server web, perilaku ini sangat tidak diinginkan. Alangkah baiknya memiliki mekanisme yang memungkinkan, tanpa menghentikan program, untuk menangkap kesalahan, dan kemudian mengambil tindakan untuk memperbaikinya. Mekanisme semacam itu ada dalam JavaScript, diwakili oleh
try...catch construct.
▍bangun coba ... tangkap
try...catch konstruk memungkinkan Anda untuk menangkap dan menangani pengecualian. Yaitu, itu termasuk blok
try , yang mencakup kode yang dapat menyebabkan kesalahan, dan
catch , di mana kontrol ditransfer ketika kesalahan terjadi.
try blok tidak benar-benar memasukkan semua kode program. Bagian-bagian itu yang dapat menyebabkan kesalahan runtime ditempatkan di sana. Misalnya, panggilan ke fungsi yang harus bekerja dengan data tertentu yang diterima dari sumber eksternal. Jika struktur data tersebut berbeda dari yang diharapkan fungsi, kesalahan dapat terjadi. Inilah yang
try...catch diagram desain terlihat.
try {
Jika kode dieksekusi tanpa kesalahan,
catch (penangan pengecualian) tidak dieksekusi. Jika kesalahan terjadi, objek kesalahan ditransfer di sana dan beberapa tindakan diambil untuk memerangi kesalahan ini.
Kami menerapkan konstruksi ini dalam contoh kami, melindungi dengan bantuannya bagian-bagian berbahaya dari program - yang mana fungsi
fn() dipanggil.
let obj = {value: 'message text'} let notObj let fn = (a) => a.value try { console.log(fn(obj)) } catch (e) { console.log(e.message) } console.log('Before')
Mari kita lihat hasil dari mengeksekusi kode ini di Node.js.
Penanganan Kesalahan di Node.jsSeperti yang Anda lihat, jika Anda membandingkan contoh ini dengan yang sebelumnya, sekarang semua kode dieksekusi, dan yang terletak sebelum baris masalah, dan yang terletak setelahnya. Kami "memproses" kesalahan dengan hanya mencetak ke konsol nilai properti
message objek
Kesalahan . Apa yang akan menjadi penanganan kesalahan yang terjadi dalam kode yang sebenarnya digunakan tergantung pada kesalahan.
Kami membahas
try...catch blok di atas, tetapi, pada kenyataannya, konstruksi ini termasuk blok lain -
finally .
▍ akhirnya diblokir
Blok
finally berisi kode yang berjalan terlepas dari ada atau tidaknya kesalahan dalam kode yang berjalan di blok
try . Ini tampilannya.
try {
Blok
finally juga dapat digunakan jika
try...catch...finally blok tidak memiliki
catch . Dalam pendekatan ini, digunakan dengan cara yang sama seperti dalam konstruksi dengan
catch , misalnya, untuk membebaskan sumber daya yang ditempati di blok
try .
▍ Blok percobaan bersarang
Coba blok bisa bersarang bersama. Dalam hal ini, pengecualian ditangani di
catch terdekat.
try {
Dalam hal ini, jika pengecualian terjadi di blok
try internal, itu akan diproses di
catch eksternal.
Exception Pengecualian yang dihasilkan sendiri
Pengecualian dapat dilempar sendiri menggunakan pernyataan
throw . Ini tampilannya.
throw value
Setelah instruksi ini dijalankan, kontrol dipindahkan ke
catch terdekat, atau jika blok tersebut tidak dapat ditemukan, program berhenti. Nilai pengecualian bisa berupa apa saja. Misalnya, objek kesalahan yang ditentukan pengguna.
Tentang titik koma
Menggunakan titik koma dalam JavaScript adalah opsional. Beberapa programmer melakukan tanpa mereka, mengandalkan sistem pengaturan otomatis untuk mereka, dan menempatkan mereka hanya di tempat yang benar-benar diperlukan. Beberapa orang lebih suka menempatkannya sedapat mungkin. Penulis materi ini mengacu pada kategori programmer yang ingin melakukan tanpa titik koma. Dia mengatakan bahwa dia memutuskan untuk melakukannya tanpa mereka di musim gugur 2017 dengan menetapkan Prettier untuk menghapusnya di mana pun Anda dapat melakukannya tanpa penyisipan eksplisit mereka. Menurutnya, kode tanpa titik koma terlihat lebih alami dan lebih mudah dibaca.
Mungkin kita dapat mengatakan bahwa komunitas pengembang JS dibagi, dalam kaitannya dengan titik koma, menjadi dua kubu. Pada saat yang sama, ada juga panduan gaya JavaScript yang menentukan titik koma eksplisit, dan panduan yang merekomendasikan melakukannya tanpa mereka.
Semua ini dimungkinkan karena fakta bahwa JavaScript memiliki sistem untuk titik koma otomatis (Penyisipan Titik Koma Otomatis, ASI). Namun, fakta bahwa dalam kode JS, dalam banyak situasi, Anda dapat melakukannya tanpa karakter ini, dan fakta bahwa titik koma ditempatkan secara otomatis ketika menyiapkan kode untuk dieksekusi, tidak berarti bahwa pemrogram tidak perlu mengetahui aturan yang dengannya hal ini terjadi. Ketidaktahuan tentang aturan ini menyebabkan kesalahan.
▍ Aturan untuk titik koma otomatis
JavaScript parser secara otomatis menambahkan titik koma saat mem-parsing teks program dalam situasi berikut:
- Ketika baris berikutnya dimulai dengan kode yang mengganggu kode saat ini (kode perintah tertentu mungkin terletak di beberapa baris).
- Ketika baris berikutnya dimulai dengan karakter
} , yang menutup blok saat ini. - Ketika akhir file dengan kode program terdeteksi.
- Sejalan dengan perintah
return . - Sejalan dengan perintah
break . - Sejalan dengan perintah
throw . - Sejalan dengan perintah
continue .
▍ Contoh kode yang tidak berfungsi seperti yang diharapkan
Berikut adalah beberapa contoh yang menggambarkan aturan di atas. Misalnya, menurut Anda apa yang akan ditampilkan sebagai hasil dari eksekusi fragmen kode berikut?
const hey = 'hey' const you = 'hey' const heyYou = hey + ' ' + you ['h', 'e', 'y'].forEach((letter) => console.log(letter))
Ketika mencoba mengeksekusi kode ini, kesalahan
Uncaught TypeError: Cannot read property 'forEach' of undefined akan
Uncaught TypeError: Cannot read property 'forEach' of undefined sistem yang
Uncaught TypeError: Cannot read property 'forEach' of undefined , berdasarkan aturan No. 1, ia mencoba menafsirkan kode sebagai berikut.
const hey = 'hey'; const you = 'hey'; const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))
Masalahnya dapat diselesaikan dengan meletakkan tanda koma setelah garis kedua dari belakang contoh pertama.
Ini potongan kode lain.
(1 + 2).toString()
Hasil eksekusi akan menjadi output dari string
"3" . Tetapi apa yang terjadi jika sesuatu seperti ini muncul di cuplikan kode berikutnya?
const a = 1 const b = 2 const c = a + b (a + b).toString()
Dalam situasi ini, kesalahan
TypeError: b is not a function akan muncul
TypeError: b is not a function karena kode di atas akan ditafsirkan sebagai berikut.
const a = 1 const b = 2 const c = a + b(a + b).toString()
Mari kita lihat contoh berdasarkan aturan 4.
(() => { return { color: 'white' } })()
Anda mungkin berpikir bahwa IIFE ini akan mengembalikan objek yang berisi properti
color , tetapi kenyataannya tidak. Sebagai gantinya, fungsi akan kembali
undefined karena sistem menambahkan tanda titik koma setelah perintah
return .
Untuk memecahkan masalah yang sama, kurung buka objek literal harus ditempatkan pada baris yang sama dengan perintah
return .
(() => { return { color: 'white' } })()
Jika Anda melihat fragmen kode berikut, Anda mungkin berpikir bahwa itu akan menampilkan
0 di kotak pesan.
1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)
Tetapi menghasilkan 2, karena, sesuai dengan aturan No. 1, kode ini direpresentasikan sebagai berikut.
1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)
Anda harus berhati-hati saat menggunakan titik koma di JavaScript. Anda dapat bertemu dengan kedua pendukung titik koma yang bersemangat, dan lawan mereka. Bahkan, ketika memutuskan apakah titik koma diperlukan dalam kode Anda, Anda dapat mengandalkan fakta bahwa JS mendukung substitusi otomatis mereka, tetapi semua orang harus memutuskan sendiri apakah mereka diperlukan dalam kode-nya atau tidak. Hal utama adalah menerapkan pendekatan yang dipilih secara konsisten dan masuk akal. Mengenai penempatan titik koma dan struktur kode, kami dapat merekomendasikan aturan berikut:
- Dengan menggunakan perintah
return , atur apa yang seharusnya kembali dari fungsi pada baris yang sama dengan perintah. Hal yang sama berlaku untuk perintah break , throw , continue . - Berikan perhatian khusus pada situasi di mana baris kode baru dimulai dengan braket, karena baris ini dapat secara otomatis dikombinasikan dengan yang sebelumnya dan disajikan oleh sistem sebagai upaya untuk memanggil fungsi atau upaya untuk mengakses elemen array.
Secara umum, dapat dikatakan bahwa apakah Anda menempatkan titik koma sendiri, atau mengandalkan penempatan otomatisnya, uji kodenya untuk memastikan bahwa itu berfungsi persis seperti yang diharapkan.
Tanda kutip dan wildcard literals
Mari kita bicara tentang fitur menggunakan tanda kutip dalam JavaScript. Yaitu, kita berbicara tentang jenis kutipan berikut yang diizinkan dalam program JS:
- Kutipan tunggal.
- Kutipan ganda.
- Kutipan kembali.
Kutipan tunggal dan ganda, secara umum, dapat dianggap sama.
const test = 'test' const bike = "bike"
Praktis tidak ada perbedaan di antara mereka. Mungkin satu-satunya perbedaan yang nyata adalah bahwa dalam string yang diapit dengan tanda kutip tunggal, Anda harus keluar dari karakter tanda kutip tunggal, dan dalam string yang diapit dengan tanda kutip ganda, karakternya menjadi ganda.
const test = 'test' const test = 'te\'st' const test = 'te"st' const test = "te\"st" const test = "te'st"
Dalam panduan gaya yang berbeda, Anda dapat menemukan rekomendasi untuk menggunakan tanda kutip tunggal dan rekomendasi untuk menggunakan tanda kutip ganda. Penulis materi ini mengatakan bahwa dalam JS-code ia berusaha untuk menggunakan tanda kutip tunggal secara eksklusif, menggunakan tanda kutip ganda hanya dalam kode HTML.
Backticks muncul dalam JavaScript dengan merilis standar ES6 pada tahun 2015. Mereka, di antara fitur-fitur baru lainnya, memungkinkan untuk dengan mudah menggambarkan string multi-line. String semacam itu juga dapat ditentukan menggunakan tanda kutip reguler - menggunakan urutan escape
\n . Ini terlihat seperti ini.
const multilineString = 'A string\non multiple lines'
Koma terbalik (biasanya tombol untuk memasukkannya terletak di sebelah kiri tombol angka 1 pada keyboard) lakukan tanpa
\n .
const multilineString = `A string on multiple lines`
Tetapi kemungkinan backquote tidak terbatas pada ini. Jadi, jika sebuah string dideskripsikan menggunakan backquotes, dimungkinkan untuk mengganti nilai-nilai dari perhitungan JS-expressions ke dalamnya menggunakan konstruksi
${} .
const multilineString = `A string on ${1+1} lines`
String semacam itu disebut templat literal.
Literal templat memiliki fitur berikut:
- Mereka mendukung teks multi-baris.
- Mereka memungkinkan untuk menyisipkan string, ekspresi bawaan dapat digunakan di dalamnya.
- Mereka memungkinkan Anda untuk bekerja dengan templat yang ditandai, memungkinkan untuk membuat bahasa spesifik domain Anda sendiri (DSL, Bahasa Khusus Domain).
Mari kita bicara tentang fitur-fitur ini.
▍Multiline text
Saat mengatur teks multisaluran dengan tanda kutip belakang, Anda harus ingat bahwa spasi dalam teks tersebut sama pentingnya dengan karakter lain. Misalnya, pertimbangkan teks multiline berikut.
const string = `First Second`
Kesimpulannya akan memberikan kira-kira berikut ini.
First Second
Artinya, ternyata bahwa ketika teks ini dimasukkan dalam editor, maka mungkin programmer berharap bahwa kata-kata
First dan
Second , ketika menghasilkan, akan muncul satu sama lain, tetapi kenyataannya tidak demikian. Untuk mengatasi masalah ini, Anda dapat memulai teks multiline dengan umpan baris, dan, segera setelah menutup tanda kutip belakang, panggil metode
trim() , yang akan menghapus spasi putih di awal atau akhir baris. Karakter seperti itu, khususnya, termasuk spasi dan tab. Karakter akhir baris juga akan dihapus.
Ini terlihat seperti ini.
const string = ` First Second`.trim()
▍ Interpolasi
Yang dimaksud dengan interpolasi adalah konversi variabel dan ekspresi menjadi string. Ini dilakukan menggunakan konstruk
${} .
const variable = 'test' const string = `something ${ variable }`
Anda dapat menambahkan apa pun ke blok
${} - bahkan ekspresi.
const string = `something ${1 + 2 + 3}` const string2 = `something ${foo() ? 'x' : 'y' }`
Teks
something 6 akan masuk ke
string konstan, baik teks
something x atau teks
something y akan ditulis ke
string string2 . Itu tergantung pada apakah fungsi
foo() mengembalikan true atau false (operator ternary digunakan di sini, yang, jika apa yang sebelum tanda tanya itu benar, mengembalikan apa yang muncul setelah tanda tanya, sebaliknya mengembalikan apa datang setelah usus besar).
▍Tagged Templates
Template tagged digunakan di banyak perpustakaan populer. Diantaranya adalah
Styled Components ,
Apollo ,
GraphQL .
Apa yang dihasilkan oleh pola seperti itu tergantung pada beberapa logika yang didefinisikan oleh fungsi. Berikut adalah contoh yang sedikit direvisi dalam salah satu
publikasi kami yang menggambarkan cara bekerja dengan string templat yang ditandai.
const esth = 8 function helper(strs, ...keys) { const str1 = strs[0]
Di sini, jika angka
8 ditulis dalam konstanta
esth , garis
ES 8 is awesome akan berada di
es . Kalau tidak, akan ada baris lain. Misalnya, jika
esth angka
6 , maka
ES 6 is good .
Komponen yang Ditata menggunakan templat yang ditandai untuk menentukan string CSS.
const Button = styled.button` font-size: 1.5em; background-color: black; color: white; `;
Di Apollo, mereka digunakan untuk mendefinisikan permintaan GraphQL.
const query = gql` query { ... } `
Mengetahui cara kerja templat yang ditandai, mudah untuk memahami bahwa
styled.button dan
gql dari contoh sebelumnya hanyalah fungsi.
function gql(literals, ...expressions) { }
Sebagai contoh, fungsi
gql() mengembalikan string yang mungkin merupakan hasil dari perhitungan apa pun. Parameter
literals dari fungsi ini adalah array yang berisi konten templat literal yang dibagi menjadi beberapa bagian, ekspresi berisi hasil evaluasi ekspresi.
Mari kita uraikan baris berikutnya.
const string = helper`something ${1 + 2 + 3} `
Fungsi
helper mendapatkan array
literals berisi dua elemen. Di yang pertama akan ada teks
something dengan spasi setelahnya, di yang kedua akan ada baris kosong - yaitu, apa yang ada di antara ekspresi
${1 + 2 + 3} dan akhir baris. Akan ada satu elemen dalam array
espressions -
6 .
Ini adalah contoh yang lebih kompleks.
const string = helper`something another ${'x'} new line ${1 + 2 + 3} test`
Di sini, di fungsi
helper , array berikutnya akan menjadi parameter pertama.
[ 'something\nanother ', '\nnew line ', '\ntest' ]
Array kedua akan terlihat seperti ini.
[ 'x', 6 ]
Ringkasan
Hari ini kita berbicara tentang penanganan pengecualian, tentang substitusi otomatis titik koma, dan tentang literal templat dalam JavaScript. Lain kali kita akan melihat beberapa konsep bahasa yang lebih penting. Secara khusus - bekerja dalam mode ketat, timer, perhitungan matematis.
Pembaca yang budiman! Apakah Anda menggunakan kemampuan templat yang ditandai dalam JavaScript?
