Kita sudah menyinggung tipe data `string` pada artikel tipe data jadi saya tidak akan mengulang penjelasannya. Saya hanya akan menambahkan informasi yang harus kamu tahu tentang tipe data `string`.
String Length
String terbentuk dari kumpulan karakter. String `length` adalah banyaknya karakter dalam sebuah string.
Mengakses Karakter dalam String
Setiap karakter dalam string memiliki index yang dimulai dari nol. Karakter pertama memiliki index nol.
Untuk mengakses karakter dalam string, gunakan kurung siku `[nomor index]`.
String Object
Umumnya `string` dibuat dengan string literal. Tapi kamu bisa juga bisa membuat string sebagai object `String`.
Meskipun bisa dilakukan, lebih baik untuk tidak membuat string sebagai objek, karena akan memperlambat eksekusi kode. Jadi, cukup untuk diketahui saja.
Membandingkan String
Kita dapat menggunakan equality operator (==) untuk membandingkan dua buah string apakah string yang sama.
Namun meskipun memiliki string yang sama, kedua variabel diatas memiliki tipe data yang berbeda. Strict equality operator (===) dapat menangani kasus ini untuk mengecek kesamaan tipe data.
Kita akan membahas lebih detail Operator Perbandingan (Comparation Operators) pada artikel lain.
String Concatenation
`String Concatenation` atau penggabungan string adalah sebuah metode menggabungkan beberapa string menjadi sebuah string menggunakan operator addition (+). String tersebut dapat berupa string literal ataupun variabel `string`.
Contoh penggabungan string literal:
Contoh penggabungan variabel string:
String Template atau Template Literal
Template literal adalah metode penggabungan string tanpa menggunakan operator penjumlahan (+). Template literal memungkinkan kita menggabungkan string dengan ekspresi atau variabel secara mudah.
Template literal menggunakan tanda kutip backtick ( ` ) sebagai pembungkus string, bukan menggunakan tanda kutip tunggal (' ') atau ganda (" ").
Sekarang kita coba sederhanakan contoh penggabungan string sebelumnya dengan template literal.
Template literal menggunakan `${...}` untuk membungkus variabel dan ekspresi. Tidak lagi menggunakan tanda plus (+).
Ini sangat berguna ketika kita perlu menggabungkan banyak variabel dan setiap variabel perlu dipisahkan dengan spasi atau karakter lain.
Coba lihat perbandingan berikut:
Ada banyak tanda petik dua dan operator penjumlahan di `stringConcat`. Seperti ini akan menyebabkan kode rawan akan kesalahan.
Tanda petik tunggal dan petik ganda dapat digunakan dengan bebas di dalam template literal:
Multi-line String dengan Template Literal
Salah satu keunggulan template literal adalah memungkinkan untuk membuat string lebih dari satu baris. Meskipun metode penggabungan string biasa dapat melakukannya, ia memerlukan cara khusus yang sedikit lebih rumit.
Multi-baris dengan `template literal`:
Multi-baris dengan `string concat`:
Pada contoh diatas, `\n` dan `\` disebut `escape character`.
`\n` digunakan untuk membuat baris baru. Template literal otomatis menambahkannya, namun tidak terlihat. Akan terlihat ketika kita tampilkan di konsol.
Sedangkan single backslash `\` digunakan sebagai penanda akhir baris.
Coba lihat apa yang keluar di konsol dari kedua variabel tersebut: (Tekan tombol run!)
Lihat. Template literal menambahkan `\n` secara otomatis.
Ketika `\n` kita masukkan ke dalam sebuah elemen HTML dengan `innerText`, ia akan berubah menjadi tag `<br>` sebagai penanda baris baru atau `break row`.
Output:
Dalam projek nyata, biasanya saya memanfaatkan template literal untuk membuat `markup html` ketika hendak membuat elemen html yang dinamis.
Contohnya:
Penggunaan template literal dalam contoh diatas akan mempersingkat kode berikut:
Escape Character
Dua escape character sudah kita gunakan dalam contoh sebelumnya. Mari kita bahas lebih detail keduanya beserta kawan-kawannya.
Escape Character | Deskripsi |
---|---|
\' | Single Quote |
\" | Double Quote |
\\ | Backslash |
\n | New line |
\r | Carriage return |
\t | Horizontal Tabulator |
\v | Vertical Tabulator |
\b | Backspace |
\f | Form feed |
Karakter backslash `\` digunakan untuk membuat karakter yang awalnya tidak dapat digunakan di dalam string menjadi dapat digunakan.
Contohnya ketika memasukkan petik ganda ( " ) dan petik tunggal ( ' ).
Menggunakan petik ganda didalam petik ganda tidak diperkenankan. Tetapi escape character double quote ( \" ) bisa menjadi solusi.
Karakter ( \' ) digunakan untuk membuat petik tunggal.
Karakter `\\` digunakan untuk memunculkan tanda backslash.
Karakter New Line `\n` membuat baris baru atau break row.
Karakter Cariage Return `\r` hampir sama dengan `\n`, yaitu membuat baris baru.
Karakter Horizontal Tabulator `\t` digunakan untuk membuat indensasi (tab).
Jika dijalankan di konsol, karakter `\t` akan menghasilkan tabulasi seperti yang diinginkan.
Namun jika dijadikan sebagai teks di HTML, secara default indensasi akan diabaikan. Meski demikian, kita bisa mengatur style `white-space: pre` agar indensasi tetap dipertahankan.
Karakter Vertical Tabulator `\v` digunakan untuk membuat indensasi vertikal. Tapi ini tidak akan berpengaruh apapun pada HTML.
Karakter Backspace `\b` memberikan intruksi "mudur satu karakter" atau "hapus satu karakter". Namun ini juga tidak secara umum digunakan di HTML. Ini hanya akan menciptakan karakter () yang berarti tidak dikenali HTML.
Begitu juga karakter Form Feed `\f`, ini tidak akan memberikan efek apapun pada HTML. Umunya digunakan pada percetakan, karakter ini menginstruksikan printer untuk memulai cetakan pada halaman baru.
Dalam konteks pemrograman web, kamu hanya perlu memahami 5 karakter escape berikut:
- \' untuk karakter tunggal (single quote)
- \" untuk karakter ganda (double quote)
- \\ untuk karakter backslash
- \n untuk karakter baris baru (newline)
- \t untuk karakter tabulasi horizontal (tab)