Advance JavaScript 10 - template literals/template string

Advance JavaScript 10 - template literals/template string

Apa itu template literals

Template literals adalah string literals yang memungkinkan adanya expression didalamnya 

String literals itu biasanya Kita buat dengan " atau dengan ' Dan Ada Cara ketiga yaitu menggunakan ` (back tick)

Dengan membuat string literals menggunakan back tick ini memungkinkan Kita untuk membuat template literals 

Template literals

hanya bisa dibuat menggunakan back tick `

Dan dengan back tick ini Kita bisa melakukan banyak Hal yaitu  melakukan multi line string, melakukan embedded expression ,html fragments, expression interpolation, tagget template.

Contoh multiline string

Kalau Kita menggunakan string literals biasa itu kalau Kita mau membuat line baru harus memakai \n  Dan menggunakan back tick ini tidak lagi contoh

console.log('string 1 \n string2'

Dengan back tick Kita itu Kan bisa multi line jadi begini

console.log(`string 1 

String 2`)

Contoh multi line string html fragments 

const mhs = {

nama : 'gimasn'

umur : 18

}

let el = ` <div class="mhs">

 <h2>${mhs.nama}</h2>

</div>`

console.log(el)

Embedded expression

Jadi Kita bisa menyimpan expression kedalam template literals

const nama = 'gimasnur'

let umur = 18

console.log(`hallo, nama saya ${nama}, saya ${umur}, tahun`)

Expression interpolation

let a = 10;

let b = 15;

console.log(` jika a = 10 Dan b = 15 maka  hasil penjumlahan nya adalah : ${a + b}, bukan ${2 * a + b}`);

Sekian penjelasan tentang template literals