JavaScript String Methods

JavaScript String Methods

—

by

Webbiz.ID
in

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

  1. toUpperCase(): Mengubah semua karakter dalam string menjadi huruf kapital.
  2. toLowerCase(): Mengubah semua karakter dalam string menjadi huruf kecil.
  3. charAt(): Mengembalikan karakter pada posisi tertentu dalam string.
  4. concat(): Menggabungkan dua atau lebih string.
  5. slice(): Mengambil sebagian dari string dan mengembalikannya sebagai string baru.
  6. replace(): Menggantikan kemunculan pertama dari suatu nilai dengan nilai lain dalam string.
  7. split(): Memisahkan string menjadi array substring berdasarkan pemisah yang ditentukan.
  8. trim(): Menghapus spasi di awal dan akhir string.

Contoh Penerapan pada Form HTML

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>
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.

JavaScript
let nama = "john doe";
let namaKapital = nama.toUpperCase();
console.log(namaKapital);
JavaScript

2. Metode toLowerCase()

Metode toLowerCase() digunakan untuk mengubah semua karakter dalam sebuah string menjadi huruf kecil.

JavaScript
let nama = "JOHN DOE";
let namaKecil = nama.toLowerCase();
console.log(namaKecil);
JavaScript

3. Metode charAt()

Metode charAt() digunakan untuk mengembalikan karakter pada posisi tertentu dalam sebuah string.

JavaScript
let nama = "John Doe";
let karakterPertama = nama.charAt(0);
console.log(karakterPertama);
JavaScript

4. Metode substring()

Metode substring() digunakan untuk mengambil sebagian dari sebuah string berdasarkan indeks awal dan akhir.

JavaScript
let nama = "John Doe";
let namaDepan = nama.substring(0, 4);
console.log(namaDepan);
JavaScript

5. Metode split()

Metode split() digunakan untuk memisahkan sebuah string menjadi array berdasarkan separator yang ditentukan.

JavaScript
let nama = "John Doe";
let namaArray = nama.split(" ");
console.log(namaArray);
JavaScript

6. Metode replace()

Metode replace() digunakan untuk mengganti substring tertentu dalam sebuah string dengan substring baru.

JavaScript
let kalimat = "Halo, nama saya John Doe";
let kalimatBaru = kalimat.replace("John Doe", "Jane Smith");
console.log(kalimatBaru);
JavaScript

7. Metode indexOf()

Metode indexOf() digunakan untuk mencari indeks pertama dari sebuah substring dalam sebuah string.

JavaScript
let kalimat = "Halo, nama saya John Doe";
let indeks = kalimat.indexOf("John");
console.log(indeks);
JavaScript

8. Metode trim()

Metode trim() digunakan untuk menghapus spasi di awal dan akhir sebuah string.

JavaScript
let nama = "   John Doe   ";
let namaTrim = nama.trim();
console.log(namaTrim);
JavaScript

Dengan menggunakan metode-metode di atas, Anda dapat memanipulasi dan memanfaatkan data string dengan lebih efektif dalam pengembangan web.

Artikel Terbaru ⭐