Belajar ES6 – Template String dan New Method String

Saya coba lanjut Belajar ES6 dengan fitur Template String dan New Method String yang mungkin nanti akan bermanfaat ketika memulai di salah satu framework Javascript seperti ReactJS, VueJS ataupun AngularJS.

Template String pada ES6

Pada ES6, kita bisa biasanya menyatukan karakter atau string dengan symbol +. Sebagai contoh saya ada 2 variable.

var name = "adiputra"
var city = "Bekasi"

console.log("Hai nama saya " + name + ", saya tinggal di " + city + ".");

Terlihat kita menggunakan + symbol untuk menyatukan string tersebut dengan variable yang ingin kita tampilkan.

Kita juga bisa menggunakan backtick symbol untuk menyatukan string tersebut, seperti kode berikut ini.

> var name="adiputra"
> var city="Bekasi"
> console.log(`Nama saya ` + name + `, saya tinggal di ` + city + `.`);
Nama saya adiputra, saya tinggal di Bekasi.

Nah dengan ES6, kita bisa menggunakan fitur terbarunya yaitu template string. Buat temen-temen yang pernah menggunakan template engine seperti blade, twig dan lainnya mungkin tidak kaget dengan fitur ini. Kita cukup menambahkan symbol $ dan kurung seperti kode berikut ini.

> var name="adiputra"
undefined
> var city="Bekasi"
undefined
> console.log(`Nama saya ` + name + `, saya tinggal di ` + city + `.`);
Nama saya adiputra, saya tinggal di Bekasi.
> console.log(`Nama saya ${name}, saya tinggal di ${city}.`);
Nama saya adiputra, saya tinggal di Bekasi.

Terlihat ya perbedaannya 🙂

New Method String

Selain template string, kita bisa menggunakan method baru dalam memanipulasi string pada ES6. Beberapa method terbaru adalah:

repeat(count)

Nah dengan repeat, seperti namanya, ini untuk mengulangi string dengan jumlah pengulangan yang ingin kita lakukan. Misalnya:

adiputra@linux:~$ node
> let name="adiputra-"
undefined
> name.repeat(3);
'adiputra-adiputra-adiputra-'

startsWith dan endsWith

Fungsi startsWith dan endsWith adalah salah satu fungsi terbaru dari ES6. Kita bisa menggunakan fungsi ini untuk mengecek start dan end dari sebuah string.

Contoh sederhananya adalah:

adiputra@linux:~$ node
> let say = "HelloWorld"
undefined
> say.startsWith("Hello");
true
> say.startsWith("hello");
false
> say.startsWith("World");
false

Terlihat kita menggunakan startsWith untuk pengecek string paling depan. Terlihat pula huruf kecil dan besar itu berpengaruh ya.

Dan jika kita ingin memberikan batasan pengecekan dari posisi string keberapa, kita bisa menambahkan parameter kedua dengan nilai posisi. Misalnya:

> let say = "HelloWorld";

> say.startsWith("World", 5);
true
> say.startsWith("Hello", 0);
true

endsWith adalah kebalikan dari startsWith 🙂

includes()

Seperti halnya startsWith dan endsWith, fungsi ini mencari karakter/string di dalam string. Ada yang pernah menggunakan contains di Java? atau mungkin strpos di PHP? nah fungsi ini mirip.

Kita dapat mencari karakter atau string di dalam string dengan fungsi includes(). Contohnya:

> let say = "HelloWorld"
undefined
> say.includes("ello");
true
> say.includes("World");
true
> say.includes("elloW");
true
> say.includes("loWo");
true
> say.includes("lowo");
false

Menarik ya 🙂

Selamat mencoba Belajar ES6 – Template String dan New Method String 🙂

Artikel lainnya

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: