Tutorial Javascript 11 - String Object

JavaScript menyediakan berbagai property dan method untuk pemrosessan tipe data string yang semuanya disimpan ke dalam string object. Dalam pembahasan kali ini kita akan membahasnya secara detail.

Seperti yang sudah kita pelajari, tipe data primitif string maupun string object sama-sama bisa digunakan untuk mengakses property dan method string. Berikut contohnya:

// membuat object string
var foo = new String("Belajar JavaScript");
console.log(foo);  // Belajar JavaScript

console.log(typeof foo);  // object
console.log(foo.length);  // 18
console.log(foo.toUpperCase());  // BELAJAR JAVASCRIPT

// membuat string sebagai tipe data primitif
var bar = "Belajar JavaScript";
console.log(bar);  // Belajar JavaScript

console.log(typeof bar);  // string
console.log(foo.length);  // 18
console.log(foo.toUpperCase());  // BELAJAR JAVASCRIPT

Disini saya membuat 2 variabel string. Variabel foo berisi string object "Belajar JavaScript". Sedangkan variabel bar  diisi tipe data primitif string "Belajar JavaScript". Baik variabel foo maupun bar bisa digunakan untuk memanggil property length dan method toUpperCase().

Meskipun kedua cara pembuatan string ini bisa dipakai, cara yang disarankan adalah menggunakan tipe data primitif string atau disebut juga sebagai string literal, yakni string yang dibuat menggunkan tanda kutip.

String Object Method

Terdapat 3 method yang melekat langsung ke string object:

• String.fromCharCode()
• String.fromCodePoint()
• String.raw()

Method string.raw() tidak umum digunakan dan hanya di dukung oleh mozilla firefox, oleh karena itu tidak akan saya bahas.

Method String.fromCharCode() dan String.fromCodePoint()

Kedua method ini digunakan untuk membuat string berdasarkan kode unicode. Perbedaanya method String.fromCodePoint() mendukung penulisan karakter unicode yang lebih baru.

Seperti yang pernah kita singgung sewaktu membahas tipe data string, unicode merupakan karakter set yang dipakai javascript, dimana jumlah karakternya masih terus ditambah. Masalahnya karakter baru unicode butuh cara pengaksesan yang sedikit berbeda dan tidak bisa ditampilkan oleh method String.fromCharCode().

Berikut contoh penggunaan method String.fromCharCode():

console.log(String.fromCharCode(65));  // A
console.log(String.fromCharCode(65, 66, 67));  // ABC

console.log(String.fromCharCode(0x2615, 0x2744, 0x2f40));  // ☕❄⽀
console.log(String.fromCharCode(9749, 10052, 12096));  // ☕❄⽀

// karakter baru unicode, tidak bisa ditampilkan
console.log(String.fromCharCode(128656, 128663, 128690));  // 

Dalam daftar karakter unicode huruf A, B, dan C berada di nomor urut 65, 66 dan 67 (desimal). Oleh karena itulah perintah String.fromCharCode(65, 66, 67) akan menghasilkan string A, B, dan C.

Selain nomor urut desimal, kita juga bisa menggunakan nomor urut angka heksadesimal unicode, seperti String.fromCharCode(0x2615, 0x2744, 0x2F40) (awalan 0x digunakan untuk membuat nilai heksadesimal).

Kode ini menghasilkan tampilan yang sama dengan String.fromCharCode(9749, 10052, 12096) yang menggunakan nomor urut desimal.

Di baris terakhir, saya meggunakan nomor urut karakter baru unicode. Terlihat bahwa method String.fromCharCode() gagal menampilkan karakter tersebut (karakter 'emoji').

Mari kita coba dengan method String.fromCodePoint():

console.log(String.fromCodePoint(65));  // A
console.log(String.fromCodePoint(65, 66, 67));  // ABC

console.log(String.fromCodePoint(0x2615, 0x2744, 0x2f40));  // ☕❄⽀
console.log(String.fromCodePoint(9749, 10052, 12096));  // ☕❄⽀

// karakter baru unicode, tidak bisa ditampilkan
console.log(String.fromCodePoint(128656, 128663, 128690));  // ???

Cara penggunaan method String.fromCodePoint() sama persis seperti String.fromCharCode(). Terlihat di baris terakhir karakter emoji dari unicode sudah tampil.

Yang juga perlu diketahui, method String.fromCodePoint() merupakan bagian dari ECMAScript 6, sehingga mungkin ada beberapa web browser yang belum mendukungnya.

String Instance Property

String instance property adalah property tipe data string yang "melekat" ke hasil instance dari string object. Di dalam javascript, hanya terdapat 1 string instance property:

String.prototype.length

Propperty string.prototype.length

Property length digunakan untuk mengambil info panjang karakter dari sebuah string. Berikut contoh penggunanya:

var foo = "Belajar JavaScript";
console.log(foo.length);  // 18

var bar = "Learning Something Fun".length;
console.log(bar);  // 22

console.log("Salogy.length");  // 6

Property length cukup sering dipakai, terutama dalam proses validasi form. Misalnya kita ingin memastikan isian form sudah sesuai syarat minimal 6 karakter atau kode pegawai yang harus diisi 10  digit karakter (tidak boleh kurang atau lebih).

String Instance Method

Sering instance method adalah method yang "melekat" ke instance dari string object. Method ini cukup banyak, berikut daftar yang saya ambil dari mozilla developer network:

• String.prototype.charAt()
• String.prototype.charCodeAt()
• String.prototype.codePointAt()
• String.prototype.concat()
• String.prototyor.includes()

Masih banyak lagi lainya...

Kita akan membahas sebagian besar diantaranya.

Method String.prototype.toLowerCase() dan String.prototype.tpUpperCase()

Kedua method ini digunakan untuk mengubah case (bentuk huruf) dari sebuah string. Method toLowerCase() digunakan untu mengubah string menjadi huruf kecil, sedangkan method toUpperCase() untuk mengubah string menjadi huruf besar.

Berikut contoh penggunaanya:

var foo = "Belajar JavaScript";

console.log(foo.toLowerCase());  // belajar javascript
console.log(foo.toUpperCase());  // BELAJAR JAVASCRIPT
console.log(foo);  // Belajar JavaScript

JavaScript juga menyediakan method yang hampir mirip: String.prototype.toLocaleLowerCase() dan String.prototype.toLocaleUpperCase().

Tambahan kata "Locale" menegaskan bahwa method ini mengubah case karakter sesuai settingan bahasa lokal. Contoh bahasa yang membedakan huruf besar dan kecil adalah bahasa turki. Bagi kebanyakan bahasa (termasuk bahasa indonesia), efeknya sama seperti method toLowerCase() dan toUpperCase():

var foo = "Belajar JavaScript";

console.log(foo.toLocaleLowerCase());  // belajar javascript
console.log(foo.toLocaleUpperCase());  // BELAJAR JAVASCRIPT
console.log(foo);  // Belajar JavaScript

Method String.prototype.charAt()

Method charAt() berguna untuk menampilkan karakter yang berada di posisi tertentu dari sebuah string. Berikut contoh penggunaannya:

var foo = "Belajar JavaScript";

console.log(foo.charAt(1));  // e
console.log(foo.charAt(8));  // J
console.log("Salogy".charAt(4));  // g

Perhitungan posisi untuk method charAt() dimulai dari 0. Dengan kata lain, karakter pertama berada di posisi 0, karakter kedua di posisi 1 dst. Kurang lebih mirip seperti penomoran index array.

Sebenarnya, object string JavaScript juga bisa di akses langsung seperti layaknya sebuah array:

var foo = "Belajar JavaScript";

console.log(foo[1]);  // e
console.log(foo[8]);  // J
console.log("Salogy"[4]);  //g

Terkait hasilnya sama persis seperti menggunakan method charAt(). Namun berbeda dengan array, kita tidak bisa mengubah karakter ini.

var foo = "Belajar JavaScript";
foo[0] = "S";  // tidak akan mengubah string foo
console.log(foo);  // Belajar JavaScript

Method String.prototype.substr()

Method substr() digunakan untuk mengambil sebagian karakter string. Method ini bisa dengan 2 argumen:

• Argument pertama adalah nomor index awal pengambilan. Jika diisi angka positif perhitungan index dimulai dari awal string (dari sebelah kiri). Jika diisi angka negatif perhitungan karakter dimulai dari akhir string (dari sebelah kanan).
• Argumen kedua (opsional) menentukan berapa banyak karakter yang ingin di ambil jumlah karakter dihitung dari index yang terdapat di argumen pertama. Jika argumen kedua ini tidak ditulism artinya ambil seluruh katakter hingga akhir string.

Method substr() tidak mengubah string asal, tapi mengembalikan nilai string baru. Berikut contoh penggunaannya:

var foo = "Belajar JavaScript";

console.log(foo.substr(3));  // ajar JavaScript
console.log(foo.substr(-3));  // ipt
console.log(foo.substr(3, 4)); // ajar
console.log(foo.substr(-10, 4));  // Java

console.log(foo);  // Belajar JavaScript

Perintah foo.substr(3) berarti mengambil seluruh string foo, mulai dari index ke-3 (karakter ke-4) hingga akhir string. Perintah foo.substr(-3) artinya ambil 3 karakter terakhir dari string foo.

Perintah foo.substr(3, 4) berarti mengambil 4 karakter dari string foo, mulai dari index ke-3. Sedangkan perintah foo.substr(-10, 4) artinya, ambil 4 karakter string foo, mulai daari karakter ke 10 dari akhir string.

Di akhir kode program, saya menampilkan isi variabel foo yang tampak masih utuh, tidak terpengaruh dari pemanggilan method foo.substr().