Template Literals dan Tagged Template Literals dalam JavaScript - Catatan Harian Day 7

Hai, hari ini saya ingin mengulas ulang mengenai beberapa hal yang saya pelajari mengenai Template Literals dan Tagged Template Literals pada JavaScript.

Oke, mari kita langsung saja ulas semuanya 😁

Memahami Template Literals dan Tagged Template Literals dalam JavaScript

Template literals dan tagged template literals adalah fitur dalam JavaScript yang memungkinkan Anda menulis string lebih fleksibel dan dinamis. Dengan ini, Anda bisa membuat string interpolasi (menyisipkan variabel atau ekspresi langsung ke dalam string), menggabungkan string dengan lebih mudah, dan bahkan memproses string secara lebih lanjut dengan tagged template literals.

Apa itu Template Literals?

Template literals adalah jenis string literals yang diperkenalkan di ES6, memungkinkan Anda untuk menulis string dengan cara yang lebih fleksibel. Tidak seperti string biasa yang menggunakan tanda kutip tunggal (`'`) atau ganda (`"`), template literals menggunakan backticks (`` ` ``).

Fitur Utama Template Literals

1. Interpolasi Variabel: Anda dapat menyisipkan variabel langsung ke dalam string menggunakan `${}`.

const nama = 'Haen';

const umur = 21;

console.log(`Helo gaess, nama watashi ${nama}, umur kula ${umur} tahun`);

Output :

2. Expression Embedding: Selain variabel, Anda juga bisa menyisipkan ekspresi JavaScript.

console.log(`${5 + 3}`);

console.log(`${alert('hehe')}`);

const x = 20;

console.log(`${(x % 2 == 0) ? 'genap' : 'ganjil'}`);

3. Multiline Strings: Template literals mendukung string yang terdiri dari beberapa baris.

const pesan = `

    Baris pertama,

    Baris kedua,

    Baris ketiga.

`;

Contoh Penggunaan Template Literals

Template literals sangat berguna ketika Anda bekerja dengan HTML dalam JavaScript, terutama saat Anda perlu menyusun string HTML yang kompleks.

HTML Fragments:

const data = {

    role: 'Mage',

    hp: 10000,

    mana: 900,

    skill: 'Perfect Wind Slash'

};

const haen = `

    <div class="haen">

        <h3>${data.role}</h3>

        <div class="flex">

            <p class="">${data.hp}</p>

            <p class="">${data.mana}</p>

        </div>

        <p class="">unique skill : ${data.skill}</p>

    </div>

`;

document.body.innerHTML = haen;

Output :

Looping dengan Template Literals:

const datas = [

    {

        role: 'Mage',

        hp: 10000,

        mana: 9000,

        skill: 'Perfect Wind Slash'

    },

    {

        role: 'Archer',

        hp: 7000,

        mana: 7000,

        skill: 'Critical Fire Bloom'

    },

    {

        role: 'Tank',

        hp: 90000,

        mana: 6000,

        skill: 'Imposible Barrier'

    },

];

const haen = `

    <div class="">

        ${datas.map(m =>

            `<ul>

                <li>${m.role}</li>

                <li>${m.hp}</li>

                <li>${m.mana}</li>

                <li>unique skill : ${m.skill}</li>

            </ul>`).join('')}

    </div>

`;

document.body.innerHTML = haen;

Output :

Apa itu Tagged Template Literals?

Tagged template literals adalah fitur lanjutan dari template literals yang memungkinkan Anda memanggil fungsi dengan template literal sebagai argumennya. Dengan tagged template literals, Anda bisa memproses dan memodifikasi string sebelum mengembalikannya.

Contoh Tagged Template Literals

const skill = 'Space Move';

const mana = 10;

function highlight(strings, ...values) {

    return strings.reduce((result, str, i) => `${result}${str}<span class="hl">${values[i] || ''}</span>`, '')

}

const str = highlight`Haen, use skill ${skill}, consum ${mana} mana`;

document.body.innerHTML =  str;

Output :

Dalam contoh di atas, fungsi `highlight` menerima string dan nilai interpolasi, lalu menggabungkan dan memodifikasi hasilnya sebelum mengembalikannya sebagai string akhir.

Apa yang Terjadi Jika Tidak Menggunakan Template Literals?

Jika Anda tidak menggunakan template literals, maka Anda harus menggunakan metode tradisional untuk menggabungkan string dan variabel atau ekspresi. Ini bisa membuat kode Anda lebih panjang dan sulit dibaca, terutama saat Anda perlu menyusun string yang kompleks.

Penggabungan String Tanpa Template Literals

Sebelum adanya template literals, untuk menggabungkan string dan variabel, Anda perlu menggunakan operator `+`.

Contoh Penggabungan String Tanpa Template Literals:

const nama = 'Haen';

const umur = 21;

// Menggunakan operator +

console.log('Helo gaess, nama watashi ' + nama + ', umur kula ' + umur + ' tahun');

Kode di atas menghasilkan output yang sama dengan contoh template literals, tetapi lebih sulit dibaca karena Anda perlu secara manual menggabungkan setiap bagian string dengan operator `+`.

Multiline Strings Tanpa Template Literals

Jika Anda ingin membuat string multiline tanpa template literals, Anda perlu menggunakan `\n` untuk menandai baris baru atau menggabungkan beberapa string dengan `+`.

Contoh Multiline String Tanpa Template Literals:

const pesan = 'Baris pertama,\n' +

              'Baris kedua,\n' +

              'Baris ketiga.';

Ini membuat kode Anda lebih berantakan dan sulit dikelola dibandingkan dengan menggunakan template literals.

Apa yang Terjadi Jika Tidak Menggunakan Tagged Template Literals?

Tanpa tagged template literals, Anda tidak dapat memodifikasi atau memproses template literals sebelum mereka dievaluasi. Jika Anda ingin memanipulasi string secara manual, Anda perlu melakukan pengolahan string secara terpisah, yang bisa menjadi rumit dan kurang efisien.

Contoh Tanpa Tagged Template Literals:

Jika Anda mencoba menyoroti teks tertentu dalam string tanpa tagged template literals, Anda harus melakukannya secara manual.

const skill = 'Space Move';

const mana = 10;

const str = 'Haen, use skill ' + skill + ', consum ' + mana + ' mana';

const highlightedStr = str.replace(skill, `<span class="hl">${skill}</span>`).replace(

      mana, `<span class="hl">${mana}</span>`);

document.body.innerHTML = highlightedStr;

Dengan tagged template literals, Anda bisa menghindari langkah-langkah tambahan ini dan menulis kode yang lebih bersih dan mudah dibaca.

Jadi, itulah sedikit ulasan mengenai pembelajaran saya hari ini tentang Template Literals dan Tagged Template Literals di JavaScript. Jika ada yang salah mohon untuk koreksi dengan komen di bawah ini untuk diskusi nya

Terimakasih 😁