JavaScript Dasar: Tipe Data String

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. 

const str = "abcdefghijklmnopqrstuvwxyz";

console.log(str.length) // Output: 26

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]`. 

const str = "Karakter di dalam string. ";

console.log(str[0]); // k

console.log(str[1]); // a

String Object

Umumnya `string` dibuat dengan string literal. Tapi kamu bisa juga bisa membuat string sebagai object `String`. 

const strObj = new String("Text");

console.log(strObj);// Output: String {'Text'}

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. 

const a = "Text";

const b = new String("Text");

console.log(a == b); // True

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. 

const a = "Text";

const b = new String("Text");

console.log(a === b); // False

console.log(typeof a); // string

console.log(typeof b); // object

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: 

const fullName = "Zend" + " Kurnia"; // Zend Kurnia

Contoh penggabungan variabel string: 

const firstName = "Zend";

const lastName = "Kurnia";

const fullName = firstName + ' ' + lastName;

const intro = "Halo! Nama saya " + fullName + ". ";

console.log(intro); // Output: 'Halo! Nama saya Zend Kurnia. '

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. 

const firstName = 'Zend';

const lastName = 'Kurnia';

const intro = `Halo! Nama saya ${firstName} ${lastName}.`;

console.log(intro); // Output: 'Halo! Nama saya Zend Kurnia. '

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: 

const templateLiteral = `Text ${variabel1}, ${variabel2}, dan ${variabel3}`;

const stringConcat = "Text " + variabel1 + ", " + variabel2 + ", dan " + variabel3;

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:

const quote = `  

    Penggunaan tanda petik tunggal (' ') dan petik ganda ( " " )

    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`: 

const multiLine = `

    Salah satu keunggulan template literal

    adalah mendukung string multi-baris.

`

Multi-baris dengan `string concat`: 

const multiLineConcat = "Multi-line string \n \

dengan string concate (+) \

"

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!)

const multiLine = `

    Salah satu keunggulan template literal

    adalah mendukung string multi-baris.

`

multiLine;

const multiLineConcat = "Multi-line string \n \

dengan string concate (+) \

"

multiLineConcat;

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`. 

document.body.innerText = multiLine;

Output: 

Dalam projek nyata, biasanya saya memanfaatkan template literal untuk membuat `markup html` ketika hendak membuat elemen html yang dinamis. 

Contohnya: 

for (let i in skills) {

    const li = document.createElement('li')

    li.classList.add('skill')

    li.innerHTML = `

        <img class="icon" src="${skills[i].img}" alt="${skills[i].name}" /> ${skills[i].name}

    `

    skillsContainer.append(li)

}

Penggunaan template literal dalam contoh diatas akan mempersingkat kode berikut: 

for (let i in skills) {

    const li = document.createElement('li')

    li.classList.add('skill')

    const img = document.createElement('img');

    img.src = skills[i].img;

    img.alt = skills[i].name;

    const text = document.createTextNode(skills[i].name);

    li.append(img, text)

   

    skillsContainer.append(li)

}

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 ( ' ). 

const doubleQuote = "Karakter tersebut disebut dengan "Escape Character". "; // Error

console.log(doubleQuote)

Menggunakan petik ganda didalam petik ganda tidak diperkenankan. Tetapi escape character double quote ( \" ) bisa menjadi solusi.  

const doubleQuote = "Karakter tersebut disebut dengan \"Escape Character\". ";

console.log(doubleQuote)

Karakter ( \' ) digunakan untuk membuat petik tunggal. 

const singleQuote = "Ini 'petik tunggal' di dalam petik ganda. ";

// Sama dengan

const singleQuoteESC = 'Ini \'petik tunggal\' di dalam petik tunggal. '

console.log(singleQuote)

console.log(singleQuoteESC)

Karakter `\\` digunakan untuk memunculkan tanda backslash. 

const backslash = "Backslash (\\) adalah kebalikan dari forward slash (/). ";

console.log(backslash) // Output: Backslash (\) adalah kebalikan dari forward slash (/).

Karakter New Line `\n` membuat baris baru atau break row. 

const multiLine = "Ada tiga tanda petik: \n 1. Petik Tunggal \n 2. Petik Ganda. \n 3. Backtick";

console.log(multiLine);

Karakter Cariage Return `\r` hampir sama dengan `\n`, yaitu membuat baris baru. 

const cariageReturn = "Kalimat pertama. \rKalimat kedua.";

console.log(cariageReturn);

Karakter Horizontal Tabulator `\t` digunakan untuk membuat indensasi (tab). 

const horizontalTab = "\tKalimat ini diberi indensasi.";

console.log(horizontalTab);

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)