Tutorial Belajar JavaScript Part 18: Property dan Method (fungsi) Objek String JavaScript

Jika dalam tutorial sebelumnya kita telah mengetahui cara pendefenisian dan penggunaan tipe data String di dalam JavaScript, pada tutorial kali ini kita akan Mengenal Property dan Method (fungsi) Objek String JavaScript. Property dan Fungsi untuk tipe data String ini akan sangat membantu dalam penulisan program.


Pengertian Propery dan Method (fungsi) dari Objek String

Walaupun tipe data string bukan di defenisikan menjadi objek, namun JavaScript 'memperlakukan' tipe dasar String ini sebagai Objek String, sehingga memiliki property dan method yang dapat di gunakan.

Property dan method dari objek String semuanya mengembalikan nilai baru, dan tidak bisa mengubah nilai dalam variabel asal. Variabel asal String tetap bernilai seperti semula. Dalam pemograman sifat ini disebut dengan immutable variable.

Berikut adalah Property dan Method yang dimiliki objek String di dalam JavaScript. Kita akan membahasnya satu per satu. Property dan Method ini diurutkan secara abjad:

Property Objek String JavaScript:

  • string.length

Method Objek String JavaScript:

  • string.charAt()
  • string.charCodeAt()
  • string.concat()
  • string.indexOf()
  • string.lastIndexOf()
  • string.localeCompare()
  • string.match()
  • string.replace()
  • string.search()
  • string.slice()
  • string.split()
  • string.substr()
  • string.substring()
  • string.toLowerCase()
  • string.toString()
  • string.toUpperCase()
  • string.trim()
  • string.valueOf()

Property Objek String: String.length

String.length merupakan property satu-satunya untuk objek String. Property ini akan mengembalikan nilai panjang karakter dari sebuah String. Berikut contoh penggunaannya:

<script>
var situs = "duniailkom";
console.log(situs.length);          // 10
var belajar = "belajar javascript";
console.log(belajar.length);        // 18
</script>

Method Objek String: String.charAt()

Method String.charAt() berfungsi untuk mengambil sebuah karakter dari String. Method ini membutuhkan 1 buah argumen angka yang diisi dengan posisi karakter yang akan diambil, dimulai dari urutan 0 untuk karakter pertama, urutan 1 untuk karakter kedua, dan seterusnya. Berikut contoh penggunaannya:

<script>
var situs = "duniailkom";
console.log(situs.charAt(0));     // d
console.log(situs.charAt(5));     // i
console.log(situs.charAt(7));     // k
console.log(situs.charAt(11));    // string kosong
</script>

Cara ini mirip dengan pengaksesan karakter String sebagai array, seperti yang pernah kita bahas pada tutorial: Mengenal Tipe Data String dan Operator String JavaScript.


Method Objek String: String.charCodeAt()

Method String.charCodeAt() berfungsi untuk mengambil nilai Unicode karakter dari String. Method ini membutuhkan 1 buah argumen angka yang diisi dengan posisi karakter yang akan diambil, dimulai dari urutan 0 untuk karakter pertama, urutan 1 untuk karakter kedua, dan seterusnya. Berikut contoh penggunaannya:

<script>
var situs = "duniailkom";
console.log(situs.charCodeAt(0));     // 100
console.log(situs.charCodeAt(5));     // 105
console.log(situs.charCodeAt(7));     // 107
console.log(situs.charCodeAt(11));    // NaN
</script>

Method Objek String: String.concat()

Method String.concat() berfungsi untuk operasi penyambungan String. Method ini membutuhkan 1 atau lebih argumen bertipe String untuk disambung. Berikut contoh penggunaannya:

<script>
var situs = "duniailkom";

console.log(situs.concat(" oke"));            
// duniailkom oke

console.log(situs.concat(" situs", " belajar", " javaScript"));
// duniailkom situs belajar javaScript
</script>

Operasi penyambungan String biasanya akan lebih mudah jika menggunakan operator "+".


Method Objek String: String.indexOf()

Method String.indexOf() berfungsi untuk mencari karakter atau kata dalam sebuah String. Method ini membutuhkan 2 argumen: 1 argumen bertipe String yang diisi dengan karakter yang akan dicari, serta 1 buah argumen opsional yang berfungsi untuk menandai posisi awal pencarian. Jika argumen kedua tidak diisi, maka pencarian akan dimulai dari awal String.

Hasil kembalian method String.indexOf() adalah posisi dari karakter yang ditemukan, dimulai dari 0 untuk posisi karakter pertama. Method ini akan mengembalikan nilai -1 jika karakter tidak ditemukan.

Berikut contoh penggunaannya:

<script>
var situs = "duniailkom";
console.log(situs.indexOf("k"));   // 7
console.log(situs.indexOf("i"));   // 3
console.log(situs.indexOf("i",4)); 
// 5 (pencarian dimulai dari karakter ke-5)
 
var belajar = "Saya sedang belajar javaScript di duniailkom.com";
console.log(belajar.indexOf("sedang"));    // 4

//  (pencarian dimulai dari karakter ke-18)
console.log(belajar.indexOf("ja",17));     // 20 

console.log(belajar.indexOf("php"));       // -1 (tidak ditemukan)
</script>

Method Objek String: String.localeCompare()

Method String.localeCompare() berfungsi untuk membandingkan 2 buah string. Method ini membutuhkan 1 buah argumen bertipe string yang berisi string yang akan dibandingkan. Jika String asal 'kurang dari' string argumen, method ini akan mengembalikan nilai <0, Jika String asal 'lebih dari' string argumen, method ini akan mengembalikan nilai >0, dan akan mengembalikan 0 jika string tersebut sama.

Berikut contoh penggunaannya:

<script>
var c = "c";
console.log(c.localeCompare("c"));    // 0
console.log(c.localeCompare("a"));    // 1
console.log(c.localeCompare("d"));    // -1
 
var kota = "Jakarta";
console.log(kota.localeCompare("jakarta"));   // 1 (case sensitif)
console.log(kota.localeCompare("padang"));    // -1
console.log(kota.localeCompare("bandung"));   // 1
</script>

Method Objek String: String.match()

Method String.match() berfungsi untuk menemukan string menggunakan regular expression. Method ini membutuhkan 1 buah argumen yang berisi format regular expression yang akan dicari. Hasil akhir method ini adalah array yang berisi data seluruh string yang ditemukan.

Pembahasan tentang regular expression akan kita bahas pada tutorial tersendiri.

Berikut contoh penggunaannya:

<script>
var kalimat = "1 tambah 2 sama dengan 3";
var hasil = kalimat.match(/\d+/g); // cari semua angka
console.log(hasil);     // hasil: ["1", "2", "3"]
</script>

Method Objek String: String.replace()

Method String.replace() berfungsi untuk pencarian string menggunakan regular expression, dan mengganti kata yang dicari. Method ini merupakan fungsi find and replace di dalam JavaScript. Method String.replace() membutuhkan 2 buah argumen: argumen pertama adalah format regular expression yang akan dicari, dan argumen kedua adalah String (atau bisa juga berupa fungsi) yang akan menggantikan text hasil pencarian. Hasil akhir method ini adalah sebuah String akhir yang telah diubah.

Pembahasan tentang regular expression akan kita bahas pada tutorial tersendiri.

Berikut contoh penggunaannya:

<script>
var kalimat = "Saya sedang belajar PHP di Tutorial PHP duniailkom.com";

// cari semua kata "PHP", ganti menjadi "JavaScript";
var hasil = kalimat.replace(/PHP/g,"JavaScript"); 

// hasil: Saya sedang belajar JavaScript di Tutorial 
// JavaScript duniailkom.com
console.log(hasil); 
</script>

Method Objek String: String.search()

Method String. search() berfungsi untuk menemukan string menggunakan regular expression. Method ini membutuhkan 1 buah argumen yang berisi format regular expression yang akan dicari. Hasil akhir method ini adalah angka yang menunjukkan posisi kata yang dicari (huruf pertama dimulai dari index 0). Method ini mirip dengan String.indexOf(), namun perbedaan terletak pada argumen yang merupakan regular expression.

Pembahasan tentang regular expression akan kita bahas pada tutorial tersendiri.

Berikut contoh penggunaannya:

<script>
var kalimat = "Saya sedang belajar JavaScript di Tutorial JavaScript duniailkom.com ";
var hasil = kalimat.search(/JavaScript/g);    // cari kata "JavaScript"
console.log(hasil);     // 20 (JavaScript berada di karakter ke-21)
</script>

Method Objek String: String.slice()

Method String.slice() berfungsi untuk 'memotong' string menjadi string baru. Method ini membutuhkan 2 buah argumen angka yang berisi posisi awal dan posisi akhir string yang akan 'dipotong'. Posisi ini dimulai dari 0 untuk karakter pertama. Jika argumen bernilai negatif, maka hal itu berarti perhitungan dimulai dari akhir string.

Hasil akhir method ini adalah String baru hasil pemotongan. Method String.slice() tidak akan mengubah string asal, namun mengembalikan string baru.

Berikut contoh penggunaannya:

<script>
var kalimat = "Belajar JavaScript";
 
// potong dari index ke 3 sampai dengan ke 7.
var hasil = kalimat.slice(3,7)
console.log(hasil);    // ajar
 
// potong dari index ke 9 dari awal sampai dengan index ke 6 dari akhir.
var hasil2 = kalimat.slice(8,-6)
console.log(hasil2);    // Java
</script>

Method Objek String: String.split()

Method String.split() berfungsi untuk memisahkan string menjadi array. Method ini membutuhkan 2 buah argumen: argumen pertama berupa karakter 'pembatas' untuk memisahkan string, dan argumen kedua bersifat opsional yang berisi seberapa banyak array yang akan dihasilkan. Jika argumen kedua tidak ditulis, maka seluruh hasil akan dikembalikan berapapun jumlahnya.

Hasil akhir method ini adalah sebuah array yang terdiri dari kata-kata yang terpisahkan dari String asal.

Berikut contoh penggunaannya:

<script>
var kalimat = "Satu,Dua,Tiga,Empat,Lima";
// pisahkan String "kalimat" menjadi array dengan pemisah tanda koma
var hasil = kalimat.split(",")
console.log(hasil);    // ["Satu"," Dua", "Tiga", "Empat", "Lima"]
 
var kalimat2 = "Satu;Dua;Tiga;Empat;Lima";
// pisahkan String "kalimat" menjadi array dengan pemisah tanda ";"
// batasi array hanya 3 isian
var hasil2 = kalimat2.split(";",3)
console.log(hasil2);    // ["Satu", "Dua", "Tiga"]
</script>

Method Objek String: String.substr()

Method String.substr() berfungsi untuk 'mengambil' bagian string asal untuk menjadi string baru. Method ini membutuhkan 2 buah argumen: argumen pertama berupa angka yang berisi posisi awal dari string yang akan 'diambil', dan argumen kedua berisi berapa karakter yang akan diambil. Posisi string asal dimulai dengan angka 0 untuk karakter pertama. Jika argumen pertama bernilai negatif, berarti perhitungan dimulai dari akhir string.

Hasil akhir method ini adalah String baru hasil pengambilan. Method String. substr() tidak akan mengubah string asal, namun mengembalikan string baru.

Berikut contoh penggunaannya:

<script>
var kalimat = "Belajar JavaScript";

// ambil mulai dari index ke 3, sebanyak 9 karakter.
var hasil = kalimat.substr(3,9)
console.log(hasil);    // ajar Java
 
// ambil mulai dari index ke 6 dari akhir string
var hasil2 = kalimat.substr(-6)
console.log(hasil2);    // Script
</script>

Method Objek String: String.substring()

Method String. substring() berfungsi untuk mengambil string menjadi potongan string baru. Method ini membutuhkan 2 buah argumen angka yang berisi posisi awal dan akhir string yang akan diambil. Posisi ini dimulai dari 0 untuk karakter pertama. Berbeda dengan method String.slice(), argumen kedua dari method ini tidak bisa diisi dengan nilai negatif.

Hasil akhir method ini adalah String baru hasil pemotongan. Method String.slice() tidak akan mengubah string asal, namun mengembalikan string baru.

Berikut contoh penggunaannya:

<script>
var kalimat = "Belajar JavaScript";
 
// potong dari index ke 3 sampai dengan ke 7.
var hasil = kalimat.substring(3,7)
console.log(hasil);    // ajar
 
// potong dari index ke 8 dari awal sampai dengan akhir String.
var hasil2 = kalimat.substring(8)
console.log(hasil2);   // JavaScript
</script>

Method Objek String: String.toLowerCase() dan String.toLocaleLowerCase()

Method String.toLowerCase() dan String.toLocaleLowerCase() berfungsi untuk mengubah String asal menjadi huruf kecil. Perbedaan antara toLowerCase() dengan toLocaleLowerCase(), bahwa pada method toLocaleLowerCase() JavaScript menkonversinya dengan aturan lokal browser. Namun pada penggunaan normal dengan bahasa Indonesia atau bahasa Inggris, kedua fungsi ini akan mengembalikan nilai yang sama

Hasil akhir method ini adalah String baru hasil pengubahan. Method String.toLowerCase() dan String.toLocaleLowerCase() tidak akan mengubah string asal, namun mengembalikan string baru.

Berikut contoh penggunaannya:

<script>
var kalimat = "Belajar JavaScript";
console.log(kalimat.toLocaleLowerCase());  // hasil: belajar javascript
console.log(kalimat.toLowerCase());        // hasil: belajar javascript
 
var kalimat2 = "bELAJAR JaVaScrIPT";
console.log(kalimat2.toLocaleLowerCase()); // hasil: belajar javascript
console.log(kalimat2.toLowerCase());       // hasil: belajar javascript
</script>

Method Objek String: String.toUpperCase() dan String.toLocaleUpperCase()

Method String.toUpperCase() dan String.toLocaleUpperCase() berfungsi untuk mengubah String asal menjadi huruf besar. Perbedaan antara toUpperCase() dengan toLocaleUpperCase(), bahwa pada method toLocaleUpperCase() JavaScript menkonversinya dengan aturan lokal browser. Namun pada penggunaan normal dengan bahasa Indonesia atau bahasa Inggris, kedua fungsi ini akan mengembalikan nilai yang sama

Hasil akhir method ini adalah String baru hasil pengubahan. Method String.toUpperCase() dan String.toLocaleUpperCase() tidak akan mengubah string asal, namun mengembalikan string baru.

Berikut contoh penggunaannya:

<script>
var kalimat = "Belajar JavaScript";
console.log(kalimat.toLocaleUpperCase());  // hasil: BELAJAR JAVASCRIPT
console.log(kalimat.toUpperCase());        // hasil: BELAJAR JAVASCRIPT
 
var kalimat2 = "bELAJAR JaVaScrIPT";
console.log(kalimat2.toLocaleUpperCase()); // hasil: BELAJAR JAVASCRIPT
console.log(kalimat2.toUpperCase());       // hasil: BELAJAR JAVASCRIPT
</script>

Method Objek String: String.toString() dan String.valueOf()

Method String.toString() dan String.valueOf() berfungsi untuk memanggil tipe data 'primitif' String dari Objek String. Kita akan jarang menggunakan kedua method ini. Dan jika digunakan, akan mengembalikan nilai String asal.

Berikut contoh penggunaannya:

<script>
var kalimat = "Belajar JavaScript";
console.log(kalimat.toString());      // hasil: Belajar JavaScript
console.log(kalimat.valueOf());       // hasil: Belajar JavaScript
 
var kalimat2 = "bELAJAR JaVaScrIPT";
console.log(kalimat2.toString());     // hasil: bELAJAR JaVaScrIPT
console.log(kalimat2.valueOf());      // hasil: Belajar JavaScript
</script>

Method Objek String: String.trim()

Method String.trim() berfungsi untuk 'membuang' bagian spasi atau string kosong di awal dan diakhir String. Biasanya method ini dipanggil untuk memastikan input dari user tidak mengandung spasi di awal dan akhir inputan.

Hasil akhir method ini adalah String baru hasil pemrosesan. Method String.trim() tidak akan mengubah string asal, namun mengembalikan string baru.

Berikut contoh penggunaannya:

<script>
var nama = " Chelsea Susanti   ";
console.log(nama);            // hasil:" Chelsea Susanti   "
console.log(nama.trim());     // hasil: "Chelsea Susanti"
</script>

Dalam Tutorial JavaScript kali ini kita telah membahas secara lengkap tentang property dan method yang dimiliki oleh Tipe Data String di dalam JavaScript. Fungsi-fungsi ini akan sangat berguna untuk menformat dan memproses hasil program.

Dalam Tutorial JavaScript berikutnya, kita akan membahas tentang Tipe Data Boolean di dalam JavaScript.


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

2 Comments

  1. Muhammad Fauzi
    06 Mar 17
  2. aditya
    20 Feb 21

Add Comment