Advance JavaScript 11 - tagged template literals

Advance JavaScript 11 -  tagged template literals

Kita masih membahas mengenali template literals Dan Kali ini Kita akan membahas topik tentang tagged template

apa itu tagged template
Menurut mdn "tagged template adalah bentuk yang lebih komplek dari template literals memungkinkan Kita untuk membaca template literals melalui sebuah function"

Contoh tagged template

Template literals biasa

const nama = "gimasn
const umur = 18

const str = `hallo nama saya ${nama},Dan saya ${umur}, tahun`

console.log(str)

Sekarang  Kita akan menjadikan template literals biasa ini menjadi tagged template literals

const nama = "gimasn
const umur = 18

function coba(){
return coba;
}

const str = coba `hallo nama saya ${nama},Dan saya ${umur}, tahun`

console.log(str)

Jika ini dijalankan  akan memunculkan string coba , aga aneh emang string yang Kita tulis itu tidak dipakai, tetapi secara default tagged template ini bisa menerima argument , kalau parameter pertama Kita kasih nama string ,

const nama = "gimasn
const umur = 18

function coba(string){
return string;
}

const str = coba `hallo nama saya ${nama},Dan saya ${umur}, tahun`

console.log(str)

Seperti ini contohnya , maka di console nya akan menampilkan sebuah array yang berisi 3 element , element pertama berisi string hallo nama says, kedua berisi Dan saya ,ketiga berisi string tahun

Ini diambil dari Mana?
Jadi ketika Kita menjalankan template literals nya maka tagged template nya akan memecah tiap tiap string yang Ada di dalam nya, dipisahkan oleh expression nya,nah sekarang expression nama Dan umur nya masuk kedalam argument berikut nya ,yaitu argument nama , umur

const nama = "gimasn
const umur = 18

function coba(string,nama,umur){
return nama;
}

const str = coba `hallo nama saya ${nama},Dan saya ${umur}, tahun`

console.log(str)

Jadi sekarang kalau saya mereturn nya bukan string melainkan nama maka akan muncul nama nya. Kalau kalau Kita mempunyai 2 bush expression Lalu di parameter nya ditulis 3 argument , argument yang ga Ada nya itu akan di isi dengan undefined.

Dan Ada kemungkinan nanti ketika Kita membuat string Kita tidak Tau Ada berapa expression didalam template nya, nah Javascript itu mempunyai argument yang namanya rest parameter jadi dia bisa menampung seluruh expression yang Ada didalam template literals nya Cara nulisnya dengan menggunakan titik 3 Kali ... Lalu mama variabel untuk menampung nya

Contoh

const nama = "gimasn
const umur = 18

function coba(string...values){
return values;
}

const str = coba `hallo nama saya ${nama},Dan saya ${umur}, tahun`

console.log(str)

Jadi string untuk menampung string biasa ,Dan values untuk menampung seluruh expression nya

Lalu apa kegunaan dari tagged template ini ? Ada beberapa di antara nya

Saya ambil dari chatgpt:
Tagged template literals dalam JavaScript adalah fitur yang kuat yang memungkinkan Anda memproses literal templat (string dengan ekspresi tersemat) dengan sebuah fungsi. Ini memungkinkan Anda untuk memanipulasi konten literal templat sebelum ditampilkan. Beberapa penggunaan umum termasuk:

1. **Interpolasi string**: Anda dapat memasukkan nilai ke dalam templat string dan memprosesnya lebih lanjut dalam fungsi tag.

2. **Menghindari karakter khusus**: Anda dapat menghindari karakter dalam literal templat sebelum ditampilkan.

3. **Penerjemahan dan internasionalisasi**: Tagged template literals dapat digunakan untuk menangani penerjemahan dan internasionalisasi dengan memformat string secara dinamis berdasarkan bahasa lokal.

4. **Penyusunan atau pemformatan teks**: Anda dapat menerapkan gaya atau pemformatan pada bagian konten literal templat berdasarkan kondisi atau aturan tertentu.

5. **Keamanan**: Tagged template literals juga dapat digunakan untuk membersihkan atau menghindari input pengguna untuk mencegah serangan XSS (cross-site scripting).

Secara keseluruhan, tagged template literals memberikan mekanisme yang fleksibel untuk manipulasi dan pemrosesan string dalam JavaScript.

Mungkin sekian penjelasan tentang tagged template