Cara menggunakan string literal in php

Seperti yang telah kita pelajari sebelumnya, data string dapat dibuat menggunakan tanda petik dan bisa digabungkan menggunakan operator +.

Penggunaan operator + bisa merepotkan jika kita ingin menggabungkan banyak string dan menangani string dinamis.

Oleh karena itu Template Literals diperkenalkan di JavaScript ES2015.

Dengan menggunakan template literals kita bisa membuat data string yang kompleks dengan mudah.

Template literals juga dikenal dengan nama template strings, string templates, dan back-tics syntax.

Jangan bingung, keempat istilah tersebut adalah sinonim atau nama lain. Semuanya merujuk pada satu hal yang sama.

Berikut beberapa topik yang akan kita bahas terkait template literals.

1. Apa Itu Template Literals
2. Tanda Petik di Dalam String
3. Beberapa Baris String
4. Interpolasi
   1. Variabel
   2. Ekspresi

Apa Itu Template Literals?

Template literals adalah string literal yang memungkinkan kita melakukan interpolasi variabel atau ekspresi di dalam string.

Dengan kata lain, kita bisa menggunakan nilai di dalam sebuah variabel atau ekspresi dengan menyisipkan langsung ekspresi atau variabel tersebut ke dalam string.

Alih-alih menggunakan tanda petik, template literals dibuat menggunakan tanda back-tics (petik tunggal terbalik).

Pada keyboard standar, tanda back-tics dapat ditemukan di samping angka 1.

Sintaks:

`teks`

Contoh:

`Hello World`

Mari kita lihat bagaimana kita menggabungkan string sebelum ada template literals:

const nama = 'Reza';
const masaHari = 'siang';

const sapa = 'Hi ' + nama + ', selamat ' + masaHari + '.';

console.log(sapa); // Hi Reza, selamat siang.

Lihat variabel sapa di atas, kita menggabungkan beberapa variabel yang berisi string.

Ini cukup merepotkan karena kita perlu menulis tanda petik dan operator + setiap kali menyisipkan variabel.

Ini baru dua variabel, bagaimana jika lebih?

Mari kita ubah kode di atas menggunakan template literals:

const nama = 'Reza';
const masaHari = 'siang';

const sapa = `Hi ${nama}, selamat ${masaHari}.`;

console.log(sapa); // Hi Reza, selamat siang.

Dengan menggunakan template literals kode kita menjadi lebih ringkas dan mudah dibaca.

Jangan bingun dengan sintaks ${ ... } karena akan kita basah di bawah.

Tanda Petik di Dalam String

Sebelum ada template literals kita perlu memperhatikan teks yang akan disimpan, apakah itu mengandung tanda petik atau tidak.

Jika teks mengandung petik tunggal, kita perlu membungkus string menggunakan petik ganda, begitu pula jika mengandung petik ganda.

Tujuannya agar tidak dianggap sebagai petik penutup string.

Dengan menggunakan template literals, kita dapat menyisipkan teks yang berisi petik tunggal dan ganda tanpa khawatir dianggap sebagai penutup string.

Contoh:

const text = `Dia bernama Nur'azizah, biasa dipanggil "Azizah"`;

Bagaimana jika teks berisi tanda back-tics?

Ini sebetulnya jarang terjadi, tapi Kita bisa menggunakan karakter escape (\) agar tidak dianggap sebagai penutup.

Contoh:

const text = `te\`xt`;

Beberapa Baris String

Sebelum ada template literals kita biasanya menggunakan karakter escape \n untuk membuat baris baru.

Tapi dengan adanya fitur ini kita bisa membuat baris baru secara langsung.

Contoh:

const text = `Namanya adalah Reza.
Dia tinggal di sebuah desa yang asri.
Sejak kecil, dia sangat menyukai bidang komputer.`;

Interpolasi

Template literals memudahkan kita dalam menginterpolasi variabel dan ekspresi ke dalam string.

Maksud dari interpolasi di sini adalah pergantian (substitusi) variabel atau ekspresi dengan nilai nyata.

Sintaks:

${...}

Contoh:

const nama = 'Reza';
const sapa = `Hi, ${nama}.`;

${nama} pada variabel sapa akan diganti dengan nilai nyata yang dimiliki variabel tersebut, jadi Hi, Reza.;

Variabel

Dengan menggunakan template literals kita bisa melakukan substitusi variabel, atau memasukkan nilai dari sebuah variabel ke dalam string.

Contoh:

const name = 'Reza';
const masaHari = 'siang';

const sapa = `Hi ${name}, selamat ${masaHari}.`; // Hi Reza, selamat siang.

Ekspresi

Selain variabel, kita juga bisa memasukkan ekspresi ke dalam string.

Ekspresi adalah kode yang menghasilkan nilai, misalnya pemanggilan fungsi dan operasi matematika.

Contoh:

const airMinum = 4000;
const sabunMandi = 3000;
const sampo = 8000;

const totalBelanja = `Total: ${airMinum + sabunMandi + sampo}`; // Total: 15000

Kesimpulan

Jadi, dengan menggunakan template literals kita bisa mengelola string dengan lebih mudah. Kita dapat memasukkan variabel dan ekspresi ke dalam string.

Tapi, jika Anda tidak memerlukan perliaku yang dimiliki oleh template literals, Anda tidak perlu menggunakannya, lebih gunakan tanda petik.

Gunakan template literals hanya ketika dibutuhkan, misalnya saat menggabungkan string atau memasukkan variabel/ekspresi ke dalam string.