JavaScript

Belajar JavaScript Part 13 : Manipulasi String

Halo salam jumpa kembali di pertemuan yang ke-13 ini, masih di sesi belajar JavaScript. Pada pertemuan ini saya akan mengulas tentang Manipulasi String Pada JavaScript.

JavaScript menyediakan beberapa function yang bisa kita gunakan untuk memanipulasi string, beberapa function javascript yang dapat digunakan diantaranya yaitu, lastindexOf(), indexOf()slice()search()replace()substring()substr()concat()split()toUpperCase()toLowerCase() dan lainnya.

Baca: Memahami String dan Fungsinya Pada JavaScript.

Contoh Manipulasi String Dengan JavaScript

Dibawah ini ada beberapa function untuk memanipulasi string, beserta kegunaanya di tiap – tiap function.

Nama FungsiKegunaan Fungsi
length Menghitung jumlah karakter sting
lastindexOf() Menemukan letak string dalam sebuah string, dihitung dari akhir
indexOf() Menemukan letak string dalam sebuah string
slice() Menampilkan string dari karakter di uratan keberapa sampai yang ke berapa
search() Mencari string di dalam string
replace() Mengganti string
substring() Menampilkan string dari karakter di uratan keberapa sampai yang ke berapa (sama seperti slice)
substr() Menampilkan string dari karakter di uratan keberapa sampai yang ke berapa (sama seperti slice)
concat() Menggabungkan string
split() Mengubah string menjadi array
 toUpperCase()  Mengubah string menjadi huruf besar semua
toLowerCase() Mengubah string menjadi huruf kecil semua

Supaya teman – teman tidak bingung, disini saya akan contohkan beberapa dari function manipulasi string.

1. Menghitung Jumlah Karakter String Dengan lenght

Saya membuat contoh menghitung jumlah karakter dalam string menggunakan fungsi lenght, berikut kode programnya dibawah ini.

<title>Semangat Belajar JavaScript</title>
<h1>Belajar JavaScript : Manipulasi String</h1>
<h2>www.irvannurfazri.com</h2>

<p id="hitung_huruf"></p>

<script>
var hitung_kata = "Saya sedang belajar manipulasi string pada javascript di www.irvannurfazri.com SEMANGAT!!!";
document.getElementById("hitung_huruf").innerHTML = hitung_kata.length;
</script>

disini saya membuat sebuah variabel hitung_kata yang di dalamnya mempunya sebuah string “Saya sedang belajar manipulasi string pada javascript di www.irvannurfazri.com SEMANGAT!!!” kemudian kita perintahkan variabel tersebut untuk dihitung jumlah katanya dengan fungsi length

document.getElementById("hitung_huruf").innerHTML = hitung_kata.length;

Maka secara keseluruhan kata yang terdapat di string adalah 90, dan jika dijalankan hasilnya akan seperti gambar dibawah ini.


2. Menemukan Letak String Yang Dicari Dengan indexOf dan lastindexOf()

Menemukan letak yang di cari kita bisa menggunakan fungsi ini, indexOf dan lastindexOf adalah fungsi yang sudah disediakan oleh JavaScript. Jika teman – teman ingin menghitungnya dari urutan akhir, silahkan coba kode program dibawah ini.

<title>Semangat Belajar JavaScript</title>
<h1>Belajar JavaScript Manipulasi String</h1>
<h2>www.irvannurfazri.com</h2>

<p id="hitung"></p>

<script>

    var kalimat = "Saya sedang belajar manipulasi string pada javascript di www.irvannurfazri.com SEMANGAT!!!";
    var temukan = kalimat.indexOf("manipulasi");
    document.getElementById("hitung").innerHTML = temukan;

</script>

Pada kode diatas, kita membuat variabel kalimat dan temukan terlihat jelas variabel temukan meminta untuk menemukan letak string yang dicari pada variabel kalimat dengan menggunakan fungsi indexOf.

kalimat.indexOf(“manipulasi”) artinya temukan sebuah stirng yang memiliki kata “manipulasi” dan akan di proses oleh.

document.getElementById("hitung").innerHTML = temukan;

Jika dijalankan hasilnya akan seperti gambar dibawah ini.

Untuk mengetesnya silahkan teman – teman coba juga dengan lastindexOf, karna pada dasarnya ke-dua fungsi itu sama saja kegunaaannya.


3. Memfilter String Dengan slice()

Untuk fungsi slice ada 2 parameter yang harus diisi, yang pertama isi dari urutan ke berapa filter dimulai, dan parameter yang kedua sampai urutan ke berapa batas filternya.

slice(mulai filter, batas filter)

Biar lebih mudah, Irvan buat contohnya di bawah ini.

<title>Semangat Belajar JavaScript</title>
<h1>Belajar Manipulasi JavaScript</h1>
<h2>www.irvannurfazri.com</h2>

<p id="filter_kata"></p>

<script>
    var kalimat = "Saya sedang belajar manipulasi string pada javascript di www.irvannurfazri.com SEMANGAT!!!";   
    var filter = kalimat.slice(0, 200);
    document.getElementById("filter_kata").innerHTML = filter;
</script>

Contoh kode program diatas, kita telah membuat sebuah variabel kaliamat dan filter, disini fungsi slice ditunjukan pada variabel filter, untuk mencari sebuah kata di dalam variabel kalimat. Bisa teman – teman lihat disana terdapat angka 0 dan 200, artinya adalah filter mulai dari 0 sampai urutan ke 200.

Jika dijalankan hasilnya akan utuh sesuai dengan isi variabel kalimat.

Nah sekarang coba teman – teman ubah angka 0 menjadi angka 12, dan angka 200 jadi angka 78.

var filter = kalimat.slice(12, 78);

Jalankan kembali, maka hasilnya akan berubah.

Bagaimana paham kan? Oke saya anggap teman – teman sudah mengerti. Sekarang kita lanjut lagi.


4. Mencari String Dengan Fungsi Search

Untuk mencari sebuah string yang terdapat di dalam variabel, kita bisa menggunakan fungsi search untuk mencarinya, bagaimana penasaran. Berikut contoh dan caranya.

<title>Semangat Belajar JavaScript</title>
<h1>Belajar Manipulasi JavaScript</h1> 
<h2>www.irvannurfazri.com</h2>

<p id="cari_kata"></p>

<script>
    var kalimat = "Saya sedang belajar manipulasi string pada javascript di www.irvannurfazri.com SEMANGAT!!!";
    var cari = kalimat.search("manipulasi");
    document.getElementById("cari_kata").innerHTML = cari;
</script>

Disini variabel cari meminta untuk mencari kata yang memiliki data “manipulasi” dan menampilkannya.

Dengan menggunakan fungsi search di variabel kalimat, maka akan menampilkan output sesuai perintah.


5. Mengganti String Dengan replace()

Untuk mengganti sebuah string teman – teman bisa gunakan fungsi dari replace, contoh penulisannya sebagai berikut.

replace('string yang ingin diganti','diganti dengan ini')

Diatas terdapat dua parameter, yang pertama “string yang ingin di ganti” dan yang ke-dua adalah “diganti dengan ini”.

Jadi maksudnya adalah, paramater pertama meminta string tersebut diganti dengan paramater yang ke-2. Contohnya seperti ini.

<title>Semangat Belajar JavaScript</title>
<h1>Belajar Manipulasi JavaScript</h1>
<h2>www.irvannurfazri.com</h2>

<p id="ganti"></p>

<script>
    var kalimat = "Saya sedang belajar manipulasi string pada PHP di www.irvannurfazri.com SEMANGAT!!!";   
		var ganti = kalimat.replace('PHP', 'JavaScript');
    document.getElementById("ganti").innerHTML = ganti;
</script>

Pada variabel ganti diatas saya meminta kata PHP di ganti oleh JavaScript, maka hasil yang di tampilkan seperti gambar dibawah ini.

Isi variabel kalimat yang sebelumnya adalah “Saya sedang belajar manipulasi string pada PHP di www.irvannurfazri.com SEMANGAT!!!” diganti dengan JavaScript dan hasilnya adalah “Saya sedang belajar manipulasi string pada JavaScript di www.irvannurfazri.com SEMANGAT!!!”

Bagaimana paham kan ?


6. Menggabungkan String Dengan concat()

Membuat sebuah kalimat dengan 2 variabel yang berbeda, bisa menggunakan fungsi concat untuk menggabungkannya, teman – teman simak dulu contoh kode program dibawah ini.

<title>Semangat Belajar JavaScript</title>
<h1>Belajar Manipulasi String</h1>
<h2>www.irvannurfazri.com</h2>

<p id="hubungkan"></p>

<script>
    var intro = "Halo nama saya";    
    var nama = "Irvan Nurfazri";   
		  
   // menggabungkan string
  	var bersatu = intro.concat(" ",nama);  
    document.getElementById("hubungkan").innerHTML = bersatu;
</script>

Pada contoh diatas terdapat variabel intro dan variabel nama, 2 variabel yang terpisah namun akan kita coba untuk menggabungkannya dengan variabel bersatu dan meminta fungsi concat agar menghubungkannya diantara variabel intro dan variabel nama.

Hasilnya…


7. Convert String ke Array Menggunakan split()

Untuk mempersingkat waktu, teman – teman langsung saja lihat kode berikut dibawah ini.

<title>Semangat Belajar JavaScript</title>
<h1>Belajar Manipulasi String JavaScript</h1>
<h2>www.irvannurfazri.com</h2>

<p id="contoh"></p>

<script>
    var huruf = "a,b,c";    
  
   // string jadi array
    var convert = huruf.split(",");  
    document.getElementById("contoh").innerHTML = convert[0];
</script>

Contoh diatas kita telah membuat variabel huruf yang memiliki isi “a,b,c”. Lalu kita pecahkan string ini menjadi Array dengan split(), dan menetapkan tanda “,” sebagai pemisah.

var convert = huruf.split(",");

Maka akan menjadi sebuah array yang tersimpan pada variabel convert. Dan akan menampilkan Array urutan pertama.

document.getElementById("contoh").innerHTML = convert[0];

Disini urutan array pertama (0) adalah maka hasil yang ditampilkan seperti gambar dibawah ini.


8. Menggunakan toUpperCase dan toLowerCase Untuk Menentukan Huruf Besar dan Kecil.

Untuk mengubah kalimat menjadi huruf besar semua atau sebaliknya, kita dapat menggunakan dari fungsi ini.  toUpperCase untuk mengubah huruf menjadi kapital dan toLowerCase mengubah semua huruf menjadi huruf kecil.

Contoh penulisannya seperti di bawah ini.

<title>Semangat Belajar JavaScript</title> 
<h1>Belajar Manipulasi String JavaScript</h1>
<h2>www.irvannurfazri.com</h2>

<p id="besar"></p>
<p id="kecil"></p>

<script>
    var kalimat = "Belajar JAVASCRIPT di www.irvannurfazri.com";   
		
  	// mengubah ke huruf besar
  	var a = kalimat.toUpperCase();
  
   // mengubah ke huruf kecil
  	var b = kalimat.toLowerCase();
  
    document.getElementById("besar").innerHTML = a;
  	document.getElementById("kecil").innerHTML = b;
</script>

Hasil dari kode diatas jika dijalankan maka akan seperti gambar dibawah ini.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Manipulasi String Pada JavaScript. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terima Kasih.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.net Instagram : ig.com/irvan_gen Profile

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *