Template String

Template String sama halnya dengan tipe data String yaitu merepresentasikan data berupa text / tekstual. Template string dipekernalkan oleh ES6 penggunakan template string dengan cara memberikan back-tik(` `) pada sebuah data.

bagi yang kesulitan mencari simbol ini anda dapat menemukannya di papan keyboard yang letaknya di pojok atas sebelah kanan di bawah tombol esc.

Dengan kehadiran dari template string memberikan kemudahan dalam mengelolah data berupa string dan ini yang menjadi penyebab template string menjadi lebih powerfull dibanding string karena template string dapat membuat Multiple-line String, Ekspresi Interpolation, dan Tagged Template. ketiga hal ini yang sering digunakan dalam penulisan kode.

Multiple-line String

Bila anda ingin menampilkan string dengan beberapa baris maka akan memerlukan backslah n (\n) untuk membuat baris baru, dan concatenation (+) untuk mengabungkan string.

// dengan menggunakan string 
console.log('string baris pertama \n' +
'string baris kedua')

// akan lebih mudah bila menggunakan template string
console.log(`string baris pertama 
string baris kedua'

Ekspresi Interpolation

Penulisan Ekspresi Interpolation ditulis dengan dolar sing dan kurung kurawal (${}) yang berfungsi menyisipkan variable kedalam string.

const nama = 'iqbal'
const kota= 'pontianak'

console.log(`nama saya adalah ${nama} dan saya tinggal dikota ${kota}`)

Tagged Template

Sebuah fungsi dapat di urai menjadi string dengan menggunakan tagged template, setelah fungsi diurai dan dimanipulasi maka tagged template akan mengembalikan dalam bentuk string.

const nama = 'iqbal'
const umur = 23

const taggedTemplate = (strings, namaSaya, umurSaya) => {
     let str1 = strings[0] // halo nama saya
     let str2 = strings[1] // dan umur saya

     return `${str1}${namaSaya}${str2}${umurSaya}
}

const hasil = taggedTemplate `halo nama saya ${nama} dan umur saya ${umur}`

console.log(hasil)
// output -> halo nama saya iqbal dan umur saya 23 

1 thought on “Template String”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s