Berikut ini adalah contoh beberapa metode JavaScript String Methods. Metode-metode ini berguna untuk memanipulasi dan memanfaatkan data string dalam pengembangan web.
Metode String yang Digunakan
toUpperCase(): Mengubah semua karakter dalam string menjadi huruf kapital.toLowerCase(): Mengubah semua karakter dalam string menjadi huruf kecil.charAt(): Mengembalikan karakter pada posisi tertentu dalam string.concat(): Menggabungkan dua atau lebih string.slice(): Mengambil sebagian dari string dan mengembalikannya sebagai string baru.replace(): Menggantikan kemunculan pertama dari suatu nilai dengan nilai lain dalam string.split(): Memisahkan string menjadi array substring berdasarkan pemisah yang ditentukan.trim(): Menghapus spasi di awal dan akhir string.
Contoh Penerapan pada Form HTML
<!DOCTYPE html>
<html>
<head>
<title>Contoh Gabungan JavaScript String Methods</title>
<script>
function processForm() {
var inputText = document.getElementById("inputText").value;
var upperCaseText = inputText.toUpperCase();
var lowerCaseText = inputText.toLowerCase();
var firstChar = inputText.charAt(0);
var concatText = inputText.concat(" - Gabungan");
var slicedText = inputText.slice(0, 5);
var replacedText = inputText.replace("JavaScript", "HTML");
var splittedText = inputText.split(" ");
var trimmedText = inputText.trim();
document.getElementById("upperCaseResult").innerHTML = upperCaseText;
document.getElementById("lowerCaseResult").innerHTML = lowerCaseText;
document.getElementById("firstCharResult").innerHTML = firstChar;
document.getElementById("concatResult").innerHTML = concatText;
document.getElementById("slicedResult").innerHTML = slicedText;
document.getElementById("replacedResult").innerHTML = replacedText;
document.getElementById("splittedResult").innerHTML = splittedText;
document.getElementById("trimmedResult").innerHTML = trimmedText;
}
</script>
</head>
<body>
<h1>Contoh Gabungan JavaScript String Methods</h1>
<form>
<label for="inputText">Masukkan teks:</label>
<input type="text" id="inputText">
<button type="button" onclick="processForm()">Proses</button>
</form>
<h2>Hasil:</h2>
<p>UpperCase: <span id="upperCaseResult"></span></p>
<p>LowerCase: <span id="lowerCaseResult"></span></p>
<p>First Character: <span id="firstCharResult"></span></p>
<p>Concatenation: <span id="concatResult"></span></p>
<p>Sliced Text: <span id="slicedResult"></span></p>
<p>Replaced Text: <span id="replacedResult"></span></p>
<p>Splitted Text: <span id="splittedResult"></span></p>
<p>Trimmed Text: <span id="trimmedResult"></span></p>
</body>
</html>
Output:
See the Pen JavaScript String Methods by De Orchids (@De-Orchids) on CodePen.
1. Metode toUpperCase()
Metode toUpperCase() digunakan untuk mengubah semua karakter dalam sebuah string menjadi huruf kapital.
let nama = "john doe";
let namaKapital = nama.toUpperCase();
console.log(namaKapital);2. Metode toLowerCase()
Metode toLowerCase() digunakan untuk mengubah semua karakter dalam sebuah string menjadi huruf kecil.
let nama = "JOHN DOE";
let namaKecil = nama.toLowerCase();
console.log(namaKecil);3. Metode charAt()
Metode charAt() digunakan untuk mengembalikan karakter pada posisi tertentu dalam sebuah string.
let nama = "John Doe";
let karakterPertama = nama.charAt(0);
console.log(karakterPertama);4. Metode substring()
Metode substring() digunakan untuk mengambil sebagian dari sebuah string berdasarkan indeks awal dan akhir.
let nama = "John Doe";
let namaDepan = nama.substring(0, 4);
console.log(namaDepan);5. Metode split()
Metode split() digunakan untuk memisahkan sebuah string menjadi array berdasarkan separator yang ditentukan.
let nama = "John Doe";
let namaArray = nama.split(" ");
console.log(namaArray);6. Metode replace()
Metode replace() digunakan untuk mengganti substring tertentu dalam sebuah string dengan substring baru.
let kalimat = "Halo, nama saya John Doe";
let kalimatBaru = kalimat.replace("John Doe", "Jane Smith");
console.log(kalimatBaru);7. Metode indexOf()
Metode indexOf() digunakan untuk mencari indeks pertama dari sebuah substring dalam sebuah string.
let kalimat = "Halo, nama saya John Doe";
let indeks = kalimat.indexOf("John");
console.log(indeks);8. Metode trim()
Metode trim() digunakan untuk menghapus spasi di awal dan akhir sebuah string.
let nama = " John Doe ";
let namaTrim = nama.trim();
console.log(namaTrim);Dengan menggunakan metode-metode di atas, Anda dapat memanipulasi dan memanfaatkan data string dengan lebih efektif dalam pengembangan web.
Leave a Reply