STRING LITERAL TEMPLATE

JavaScript memberikan kita banyak cara untuk bekerja dengan string. Salah satu fitur yang sangat berguna adalah String Literal Template. Di dalam tutorial ini, kita akan menjelajahi apa itu template string literal dan bagaimana cara kerjanya.

Apa Itu String Literal Template?

String Literal Template atau biasa dikenal juga sebagai Template Literals, merupakan fitur yang diperkenalkan dalam ECMAScript 6 (ES6) yang memungkinkan pemrogram untuk bekerja secara efisien dengan string.

Secara sederhananya, string literal template memungkinkan kamu untuk melakukan hal berikut:

• Menciptakan string multi-baris di JavaScript
• Menggunakan ekspresi dalam string (interpolasi ekspresi).

Sintaks String Literal Template

Anda menggunakan backticks (` atau karakter grave accent) daripada tanda kutip tunggal (”) atau tanda kutip ganda ("") untuk membuat string literal template. Berikut adalah contohnya:

let nama = `John`;
console.log(nama); // John

Multi-Baris String

Salah satu keunggulan menggunakan template literal adalah kemampuan untuk membuat string multi-baris dengan mudah. Kamu hanya perlu memasukkan string tersebut di dalam backtick dan mengatur formatnya sesuai yang diinginkan.

let puisi = `Bunga mawar merah,
Berdiri dengan megah,
Membuat siapa saja terpanah.`;
console.log(puisi);

Pada kode di atas, string “puisi” akan mencetak teks dalam tiga baris.

Interpolasi Ekspresi

Kamu juga bisa menambahkan ekspresi langsung ke dalam string literal template. Caranya yaitu dengan memasukkan ekspresi tersebut ke dalam kurung kurawal ({}) dan menambahkan tanda dollar ($) di depannya.

Contoh:

let nama = 'Siti';
let umur = 20;
console.log(`Halo, nama saya ${nama} dan saya berumur ${umur} tahun.`);

Tagged Templates

Tagged template adalah versi yang lebih canggih dari string literal template. Fitur ini memungkinkan kamu untuk mem-parsing string literal template dengan fungsi.

Contoh:

function tag(strings, ...values) {
  let result = "";
  strings.forEach((string, i) => {
    result += string + (values[i] || "");
  });
  return result;
}

let x = 5;
let y = 10;

console.log(tag`Nilai dari x adalah ${x}, dan nilai y adalah ${y}`);

Pada kode di atas, string Nilai dari x adalah , dan nilai y adalah dan ekspresi x, y dilewatkan ke fungsi tag.

Demikian pembahasan tentang string literal template, fitur ini sangat membantu dalam penulisan kode JavaScript yang lebih rapi dan terstruktur. Selamat mencoba dan terus belajar!