Method String JavaScript: Cara Membuat dan Codenya

Metode string dapat membantu kita saat menggunakan string.

Section Artikel

1 Metode dan Properti String
2 Panjang String
3 Menemukan String dalam String
4 Mencari String dalam String
5 Apakah anda tahu?
6 Mengekstrak Bagian String
7 Metode slice ()
8 Method substring()
9 Method substr()
10 Mengganti Konten String
11 Mengubah ke Huruf Besar dan Kecil
12 Metode concat ()
13 String.trim()
14 Mengekstrak Karakter String
15 Method charAt()
16 Method charCodeAt()
17 Property Access
18 Mengubah String menjadi Array

Metode dan Properti String

Nilai primitif, seperti “John Doe”, tidak boleh memiliki properti atau metode (karena bukan objek).

Namun dengan JavaScript, metode dan properti juga tersedia untuk nilai primitif, karena JavaScript memperlakukan nilai primitif sebagai objek saat menjalankan metode dan properti.

Panjang String

Properti lenght mengembalikan panjang nilai string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Properti String JavaScript</h2>

<p>Properti lenght mengembalikan panjang nilai string.</p>

<p id="demo"></p>

<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
document.getElementById("demo").innerHTML = sln;
</script>

</body>
</html>

Menemukan String dalam String

Metode indexOf () mengembalikan indeks (posisi) yang muncul pertama dari teks yang ditentukan dalam string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method String JavaScript </h2>

<p>Metode indexOf () mengembalikan posisi kemunculan pertama dari teks yang ditentukan dalam string.</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

JavaScript menghitung indeks dari nol.
0 adalah indeks pertama dalam sebuah string, 1 adalah yang kedua, 2 adalah yang ketiga dan seterusnya.

Metode lastIndexOf () mengembalikan indeks yang muncul terakhir dari teks yang ditentukan dalam string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode lastIndexOf () mengembalikan indeks yang muncul terakhir dari teks yang ditentukan dalam string.</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

Baik indexOf (), dan lastIndexOf () mengembalikan -1 jika teks tidak ditemukan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Baik indexOf (), dan lastIndexOf () mengembalikan -1 jika teks tidak ditemukan.</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("John");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

Kedua metode menerima parameter urutan kedua sebagai posisi awal untuk pencarian.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Kedua metode menerima parameter urutan kedua sebagai posisi awal untuk pencarian.</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate",15);
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

Metode lastIndexOf () mencari dengan urutan yang paling belakang (dari akhir ke awal), artinya: jika parameter kedua adalah 15, pencarian dimulai pada posisi 15, dan mencari awal string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode lastIndexOf () menerima parameter kedua sebagai posisi awal untuk pencarian.</p>
<p>Ingat bahwa metode lastIndexOf () mencari secara mundur, jadi indeks 15 berarti memulai pencarian di posisi 15, dan mencari ke awal.</p>
<p>Posisi 15 adalah posisi 15 dari awal.</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

Mencari String dalam String

Metode search() digunakan untuk mencari string dengan nilai tertentu dan mengembalikan posisi yang sesuai.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode search () mengembalikan posisi kemunculan pertama dari teks tertentu dalam string:</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

Apakah anda tahu?

Apakan dua metode indexOf () dan search () adalah sama?

Apakah keduanya menerima argument (parameter) yang sama, dan mengembalikan nilai yang sama?

Jawabannya kedua metode ini TIDAK sama. Inilah perbedaannya:

Metode search () tidak dapat mengambil argumen posisi awal kedua.
Metode indexOf () tidak bisa mengambil nilai pencarian yang kuat (ekspresi reguler).

Mengekstrak Bagian String

Ada 3 metode untuk mengekstraksi bagian dari string:

slice(start, end)
substring(start, end)
substr(start, length)

Metode slice ()

Metode slice() digunakan untuk mengekstrak bagian dari string dan mengembalikan bagian yang diekstraksi dalam string baru.

Metode ini mengambil 2 parameter: posisi awal, dan posisi akhir (tidak termasuk akhir).

Contoh ini memotong sebagian string dari posisi 7 ke posisi 12 (13-1).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode slice() digunakan untuk mengekstrak bagian dari string dan mengembalikan bagian yang diekstraksi dalam string baru.</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(7,13);
document.getElementById("demo").innerHTML = res; 
</script>

</body>
</html>

Ingat: JavaScript menghitung posisi dari nol. Posisi pertama adalah 0.

Jika parameter negatif, posisinya dihitung dari ujung string.

Contoh di bawah ini memotong sebagian string dari posisi -12 ke posisi -6:

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode slice() digunakan untuk mengekstrak bagian dari string dan mengembalikan bagian yang diekstraksi dalam string baru.</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12,-6);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

Jika Anda menghilangkan parameter kedua, metode ini akan memotong sisa string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode slice() digunakan untuk mengekstrak bagian dari string dan mengembalikan bagian yang diekstraksi dalam string baru.</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(7);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

atau, menghitung dari posisi akhir:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode slice() digunakan untuk mengekstrak bagian dari string dan mengembalikan bagian yang diekstraksi dalam string baru.</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12) 
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

Posisi negatif tidak berfungsi di Internet Explorer 8 dan versi yang lebih lama.

Method substring()

Metode substring () mirip dengan slice ().

Namun keduanya memiliki perbedaan. Perbedaannya adalah substring () tidak dapat menerima indeks negatif.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode substring () mengekstrak bagian dari string dan mengembalikan bagian yang diekstrak dalam string baru.</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substring(7,13);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

Jika Anda menghilangkan parameter kedua, substring () akan memotong sisa string.

Method substr()

Metode substr () juga mirip dengan slice ().

Perbedaannya adalah bahwa parameter kedua menentukan panjang bagian yang diekstraksi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode substr () mengekstrak bagian dari string
dan mengembalikan bagian yang diekstrak dalam string baru:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(7,6);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

Jika Anda menghilangkan parameter kedua, substr () akan memotong sisa string.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode substr () mengekstrak bagian dari string
dan mengembalikan bagian yang diekstrak dalam string baru:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(7);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

Jika parameter pertama negatif, posisi dihitung dari ujung string.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode substr () mengekstrak bagian dari string
dan mengembalikan bagian yang diekstrak dalam string baru:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

Mengganti Konten String

Metode replace () digunakan untuk menggantikan nilai yang ditentukan dengan nilai lain dalam string.

Contoh:

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p>Ganti "Microsoft" dengan "DosenIT" di paragraf di bawah ini:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Silakan kunjungi Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","DosenIT");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Metode replace () tidak mengubah string yang dipanggilnya. Ini mengembalikan string baru.

Secara default, metode replace () hanya menggantikan persamaan string tersebut.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Ganti "Microsoft" dengan "DosenIT" di paragraf di bawah ini:</p>

<button onclick="myFunction()">Coba disini</button>

<p id="demo">Silakan kunjungi Microsoft dan Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","DosenIT");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Secara default, metode replace () peka huruf besar / kecil. Menulis MICROSOFT (dengan huruf besar) tidak akan berfungsi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Coba ganti "Microsoft" dengan "DosenIT" pada paragraf di bawah ini:</p>

<button onclick="myFunction()">Coba disini</button>

<p id="demo">Silakan kunjungi Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("MICROSOFT","DosenIT");
  document.getElementById("demo").innerHTML = txt;
}
</script>

<p><strong>Catatan:</strong> Tidak ada yang akan terjadi. Secara default, metode replace () peka huruf besar / kecil. Menulis MICROSOFT (dengan huruf besar) tidak akan berfungsi.</p>

</body>
</html>

Untuk mengganti case insensitive, gunakan ekspresi reguler dengan flag / i (tidak sensitif).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Coba ganti "Microsoft" dengan "DosenIT" pada paragraf di bawah ini:</p>

<button onclick="myFunction()">Coba</button>

<p id="demo">Silakan kunjungi Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/MICROSOFT/i,"DosenIT");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Perhatikan bahwa ekspresi reguler ditulis tanpa tanda kutip.

Untuk mengganti semua kesamaan, gunakan ekspresi reguler dengan bendera a / g (persamaan global):

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Ganti semua kemunculan "Microsoft" dengan "DosenIT" di paragraf di bawah ini:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Silakan kunjungi Microsoft dan Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/Microsoft/g,"DosenIT");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Mengubah ke Huruf Besar dan Kecil

Sebuah string dapat diubah menjadi huruf besar dengan toUpperCase ().

Contoh:

<!DOCTYPE html>
<html>
<body>

<p>Convert string dengan upper case:</p>

<button onclick="myFunction()">Cobalah</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  var text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>

</body>
</html>

Sebuah string dapat juga diubah menjadi huruf kecil dengan toLowerCase ().

Contoh:

<!DOCTYPE html>
<html>
<body>

<p>Convert string dengan lower case:</p>

<button onclick="myFunction()">Contoh</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  var text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>

</body>
</html>

Metode concat ()

Metode concat () digunakan untuk menggabungkan dua atau lebih string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode concat () digunakan untuk menggabungkan dua atau lebih string.</p>

<p id="demo"></p>

<script>
var text1 = "Hello";
var text2 = "World!";
var text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>

Metode concat () dapat digunakan sebagai pengganti operator plus. Kedua baris ini melakukan hal yang sama:

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");

Semua metode string mengembalikan string baru. Mereka tidak mengubah string aslinya.
Secara resmi dapat dikatakan bahwa String tidak dapat diubah: String tidak dapat diubah, hanya diganti.

String.trim()

Metode trim () digunakan untuk menghapus spasi dari kedua sisi string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>Klik tombol untuk memberi tahu string dengan spasi kosong.</p>

<button onclick="myFunction()">Cobalah</button>

<p><strong>Note:</strong> Metode trim () tidak didukung di Internet Explorer 8 dan versi sebelumnya.</p>

<script>
function myFunction() {
  var str = "     Hello World!     ";
  alert(str.trim());
}
</script>

</body>
</html>

Metode trim () tidak didukung di Internet Explorer 8 atau versi yang lebih rendah.

Jika diperlukan untuk mendukung pada browser IE 8, maka dapat menggunakan replace () dengan ekspresi reguler sebagai gantinya.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>IE 8 tidak mendukung String.trim (). Untuk memangkas string, Anda dapat menggunakan ekspresi reguler.</p>

<script>
var str = "     Hello World!     ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
</script>

</body>
</html>

Anda juga dapat menggunakan solusi ganti di atas untuk menambahkan fungsi trim ke JavaScript menggunakan String.prototype.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>IE 8 tidak mendukung String.trim (). Untuk memangkas string, Anda dapat menggunakan polyfill.</p>

<script>
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}
var str = "     Hello World!    ";
alert(str.trim());
</script>

</body>
</html>

Mengekstrak Karakter String

Ada 3 metode untuk mengekstrak karakter string, yaitu:

charAt (posisi)
charCodeAt (posisi)
Akses properti []

Method charAt()

Metode charAt () digunakan untuk mengembalikan karakter pada indeks (posisi) yang ditentukan dalam string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Metode charAt () mengembalikan karakter pada posisi tertentu dalam string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>

</body>
</html>

Method charCodeAt()

Metode charCodeAt () mengembalikan unicode karakter pada indeks yang ditentukan dalam string.

Metode ini mengembalikan kode UTF-16 (bilangan bulat antara 0 dan 65535).

Contoh:

<!DOCTYPE html>
<html>
<body>

<p>Metode charCodeAt () mengembalikan unicode karakter pada posisi tertentu dalam string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charCodeAt(0);
</script>

</body>
</html>

Property Access

ECMAScript 5 (2009) memungkinkan akses properti [] pada string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 memungkinkan akses properti pada string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

Akses properti memungkinkan hal tidak dapat diprediksi, sebaba:

Akses properti [] tidak bekerja di Internet Explorer 7 atau versi yang lebih lama
Akses properti [] membuat string terlihat seperti array (tetapi sebenarnya tidak)
Jika tidak ada karakter yang ditemukan, akses properti[] mengembalikan nilai tidak terdefinisi, sedangkan charAt () mengembalikan string kosong.
Ini hanya untuk dibaca. str [0] = “A” tidak memberikan kesalahan (tetapi tidak berhasil!)

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 memungkinkan akses properti pada string. tapi hanya dapat di baca:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
str[0] = "A";  // Does not work
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

Jika Anda ingin menggunakan string sebagai array, Anda dapat mengubahnya menjadi array.

Mengubah String menjadi Array

Sebuah string dapat diubah menjadi array dengan metode split ().

Contoh:

<!DOCTYPE html>
<html>
<body>

<p>Klik "Cobalah" untuk menampilkan elemen array pertama, setelah string dipisahkan.</p>

<button onclick="myFunction()">Cobalah</button>

<p id="demo"></p>

<script>
function myFunction() {
  var str = "a,b,c,d,e,f";
  var arr = str.split(",");
  document.getElementById("demo").innerHTML = arr[0];
}
</script>

</body>
</html>

Jika pemisah dihilangkan, array yang dikembalikan akan berisi seluruh string dalam indeks [0].

Jika pemisahnya adalah “”, array yang dikembalikan akan berupa array karakter tunggal.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
  text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

javascript String

Method String JavaScript: Cara Membuat dan Codenya

Metode dan Properti String

Panjang String

Menemukan String dalam String

Mencari String dalam String

Apakah anda tahu?

Mengekstrak Bagian String

Metode slice ()

Method substring()

Method substr()

Mengganti Konten String

Mengubah ke Huruf Besar dan Kecil

Metode concat ()

String.trim()

Mengekstrak Karakter String

Method charAt()

Method charCodeAt()

Property Access

Mengubah String menjadi Array

Object di JavaScript: Contoh Code dan Scriptnya

Apa Itu CRUD ? Pahami Fungsi dan Caranya

You may also like