Tutorial String JavaScript Lengkap

String adalah salah satu materi paling penting dalam JavaScript, karena hampir semua aplikasi—mulai dari web sederhana hingga aplikasi kompleks—pasti bekerja dengan teks. Pada bagian pertama ini, kita akan mempelajari dasar-dasar string JavaScript dengan penjelasan yang santai, mudah dipahami, dan dilengkapi contoh kode.

Baca juga: Objek JavaScript: Pengertian dan Contoh Penggunaan

Pengertian String JavaScript

String JavaScript adalah tipe data yang digunakan untuk menyimpan kumpulan karakter atau teks. Teks tersebut bisa berupa huruf, angka, simbol, spasi, atau kombinasi semuanya.

Contoh string:

• "Halo Dunia"
• '12345'
• "Belajar JavaScript"
• "@username_123"

Dalam JavaScript, string termasuk tipe data primitive, sama seperti number, boolean, null, undefined, dan symbol.

Kenapa String Penting dalam JavaScript?

String digunakan hampir di setiap bagian program, seperti:

• Menampilkan teks ke halaman
• Membuat pesan log di console
• Menyimpan nama, email, alamat
• Memproses input dari pengguna
• Membuat output pada UI
• Memformat data

Tanpa string, interaksi antara manusia dan aplikasi tidak akan terjadi karena teks adalah bentuk komunikasi utama.

Cara Membuat String dalam JavaScript

JavaScript menyediakan tiga cara utama untuk membuat string:

• Single quotes '...'
• Double quotes "..."
• Backticks (template literal) ...

Contoh:

const nama1 = 'Aris Munandar';
const nama2 = "JavaScript";
const nama3 = `Belajar String JavaScript`;Code language: JavaScript (javascript)

Ketiga cara ini benar dan valid. Pilihan tergantung gaya coding, namun backticks (`) memiliki fitur lebih banyak.

Perbedaan Single Quote, Double Quote, dan Backtick

1. Single Quote ‘…’
   Umum digunakan dalam banyak style guide. Tidak mendukung multiline secara langsung.

2. Double Quote “…”
   Mirip single quote. Biasa digunakan dalam proyek yang mengikuti format JSON.

3. Backtick (Template Literal) ...

   • Bisa multiline
   • Bisa menyisipkan variabel
   • Lebih fleksibel untuk membuat teks kompleks

Contoh:

const nama = "Aris";
const salam = `Halo, nama saya ${nama}!`;Code language: JavaScript (javascript)

Template literal menjadikan manipulasi teks jauh lebih mudah.

Escape Character dalam String JavaScript

Escape character digunakan untuk menambahkan karakter khusus ke dalam string. Escape diawali dengan \.

Karakter	Fungsi
\'	menulis tanda kutip '
\"	menulis tanda kutip "
\\	menulis backslash
\n	baris baru
\t	tab
\r	carriage return

Contoh:

const text = "Belajar \"String\" JavaScript\nBaris Baru\tDengan Tab";
console.log(text);Code language: JavaScript (javascript)

Cara Kerja String dalam JavaScript (Immutable)

String di JavaScript immutable, artinya:

String tidak bisa diubah setelah dibuat.

Contoh:

let kata = "Halo";
kata[0] = "J"; // tidak akan berubah
console.log(kata); // tetap "Halo"Code language: JavaScript (javascript)

Jika ingin mengubah string, kita harus membuat string baru:

let kata = "Halo";
kata = "J" + kata.slice(1);
console.log(kata); // "Jalo"Code language: JavaScript (javascript)

Ini sangat penting untuk dipahami agar tidak bingung saat manipulasi string.

String Length dalam JavaScript

Property .length digunakan untuk menghitung jumlah karakter.

const teks = "Belajar String JavaScript";
console.log(teks.length); // 26Code language: JavaScript (javascript)

Spasi, simbol, dan angka juga dihitung sebagai karakter.

Contoh String JavaScript Sederhana

Berikut beberapa contoh dasar:

const kalimat = "Saya sedang belajar string JavaScript";
const nama = 'Aris';
const pesan = `Halo ${nama}, selamat belajar!`;

console.log(kalimat);
console.log(nama);
console.log(pesan);Code language: JavaScript (javascript)

Contoh escape character:

const contoh = "Ini adalah baris pertama.\nIni baris kedua.";
console.log(contoh);Code language: JavaScript (javascript)

Contoh multiline:

const story = `
    Ini adalah cerita panjang.
    Bisa terdiri dari banyak baris.
    Karena menggunakan template literal.
`;
console.log(story);Code language: JavaScript (javascript)

Dasar-Dasar Manipulasi String JavaScript

Pada bagian ini, kita mulai fokus pada berbagai metode manipulasi string JavaScript yang paling sering digunakan dalam pemrograman. Semua penjelasan dibuat sederhana, lengkap dengan contoh kode, dan mudah dipelajari oleh pemula.

Manipulasi string sangat penting saat membuat aplikasi seperti:

• Form input
• Fitur pencarian
• Template teks
• Validasi
• Formatting tampilan

Mari kita mulai pembahasannya satu per satu.

1. Menggabungkan String (Concatenation)

Ada beberapa cara menggabungkan string:

Menggunakan tanda +

Ini adalah cara paling klasik.

const nama = "Aris";
const salam = "Halo " + nama + ", selamat datang!";
console.log(salam);Code language: JavaScript (javascript)

Menggunakan concat()

Method .concat() bisa menggabungkan banyak string sekaligus.

const text1 = "Belajar";
const text2 = "String";
const text3 = "JavaScript";

const result = text1.concat(" ", text2, " ", text3);
console.log(result);Code language: JavaScript (javascript)

Menggunakan Template Literal (Sangat Direkomendasikan)

Lebih bersih, mudah dibaca, dan modern.

const nama = "Aris";
console.log(`Halo ${nama}, ini adalah template literal!`);Code language: JavaScript (javascript)

2. Mengambil Bagian String

Tiga method yang paling sering digunakan:

Method	Penjelasan
substring(start, end)	mengambil bagian string berdasarkan index
slice(start, end)	mirip substring, bisa pakai index negatif
substr(start, length)	mengambil berdasarkan panjang (deprecated)*

substr() masih berfungsi, tapi tidak direkomendasikan untuk masa depan.

substring()

const text = "JavaScript";

console.log(text.substring(0, 4)); // "Java"
console.log(text.substring(4, 10)); // "Script"Code language: JavaScript (javascript)

slice()

Slice lebih fleksibel karena mendukung index negatif.

const text = "JavaScript";

console.log(text.slice(0, 4)); // "Java"
console.log(text.slice(-6));   // "Script"Code language: JavaScript (javascript)

substr() (tidak direkomendasikan)

const text = "JavaScript";

console.log(text.substr(0, 4)); // "Java"
console.log(text.substr(4, 6)); // "Script"
Code language: JavaScript (javascript)

3. Mengganti Teks (replace & replaceAll)

replace()

Mengganti hanya kemunculan pertama.

const text = "Belajar string JavaScript string dasar";

const result = text.replace("string", "teks");
console.log(result);Code language: JavaScript (javascript)

Output:

Belajar teks JavaScript string dasar

replaceAll()

Mengganti semua kemunculan.

const text = "Belajar string JavaScript string dasar";

const result = text.replaceAll("string", "teks");
console.log(result);Code language: JavaScript (javascript)

Output:

Belajar teks JavaScript teks dasar

4. Mengubah Huruf

toLowerCase()

const text = "BELAJAR JAVASCRIPT";
console.log(text.toLowerCase());Code language: JavaScript (javascript)

Output:

belajar javascript

toUpperCase()

const text = "belajar javascript";
console.log(text.toUpperCase());Code language: JavaScript (javascript)

Output:

BELAJAR JAVASCRIPT

5. Menghapus Spasi (Trim Methods)

Terkadang input pengguna mengandung spasi tidak perlu.

trim()

Menghapus spasi di awal dan akhir string.

const text = "   Belajar String   ";
console.log(text.trim());Code language: JavaScript (javascript)

Output:

Belajar StringCode language: JavaScript (javascript)

trimStart()

Menghapus spasi di awal string.

const text = "   JavaScript";
console.log(text.trimStart());Code language: JavaScript (javascript)

Output:

JavaScript

trimEnd()

Menghapus spasi di akhir string.

const text = "JavaScript   ";
console.log(text.trimEnd());Code language: JavaScript (javascript)

Output:

JavaScript

6. Mengecek Keberadaan Teks

includes()

Mengecek apakah string mengandung kata tertentu.

const text = "Belajar String JavaScript";

console.log(text.includes("String")); // true
console.log(text.includes("PHP")); // falseCode language: JavaScript (javascript)

startsWith()

Mengecek apakah string mengandung kata tertentu.

const text = "Belajar JavaScript";

console.log(text.startsWith("Belajar")); // trueCode language: JavaScript (javascript)

endsWith()

Mengecek apakah string mengandung kata tertentu.

const text = "Tutorial String";

console.log(text.endsWith("String")); // trueCode language: JavaScript (javascript)

7. Belajar Manipulasi String Langkah Demi Langkah

Mari ambil contoh sederhana:

Tugas: Atur teks email menjadi rapi dan validasi sederhana

Input pengguna:

let email = "   ARIS@BAHASAWEB.COM   ";Code language: JavaScript (javascript)

Langkah 1 — Hapus spasi

email = email.trim();

Langkah 2 — Jadikan lowercase

email = email.toLowerCase();

Langkah 3 — Cek apakah mengandung @

if (email.includes("@")) {
    console.log("Email valid:", email);
} else {
    console.log("Email tidak valid");
}Code language: JavaScript (javascript)

Output:

Email valid: aris@bahasaweb.comCode language: CSS (css)

8. Contoh Penggunaan Nyata

Berikut ini adalah contoh penggunaan nyata yang sering digunakan dalam aplikasi:

Format nama menjadi kapital pada awal kata

function capitalize(text) {
return text
    .toLowerCase()
    .split(" ")
        .map(kata => kata.charAt(0).toUpperCase() + kata.slice(1))
        .join(" ");
}

console.log(capitalize("aRIS muNaNDaR"));Code language: JavaScript (javascript)

Output:

Aris Munandar

Membuat slug URL

function slugify(text) {
    return text
        .toLowerCase()
        .trim()
        .replaceAll(" ", "-")
        .replace(/[^\w-]/g, "");
}

console.log(slugify("Belajar String JavaScript #2025!"));Code language: JavaScript (javascript)

Output:

belajar-string-javascript-2025

Mengambil inisial nama

function inisial(nama) {
    return nama
        .split(" ")
        .map(kata => kata[0].toUpperCase())
        .join("");
}

console.log(inisial("Aris Munandar"));Code language: JavaScript (javascript)

Output:

AM

Method String Tingkat Lanjut

Pada bagian ini, kita akan membahas berbagai method string tingkat lanjut dalam JavaScript yang sering digunakan pada aplikasi nyata. Pembahasan dimulai dari konsep dasar, contoh kode, hingga studi kasus praktis.

Metode-metode ini merupakan bagian penting dalam tutorial string JavaScript lengkap, sehingga kamu akan memahami bagaimana string manipulation bekerja secara lebih dalam.

1. split() — Memecah String Menjadi Array

split() digunakan untuk memecah string menjadi array berdasarkan delimiter tertentu.

Contoh dasar

const text = "apel, jeruk, mangga";
const hasil = text.split(", ");
console.log(hasil);Code language: JavaScript (javascript)

Output:

['apel', 'jeruk', 'mangga']Code language: JSON / JSON with Comments (json)

Penjelasan:

• “, ” → menjadi pemisah (delimiter)
• Cocok untuk parsing data seperti CSV, nama, kalimat, tag, dll.

Contoh nyata

Memecah kalimat menjadi kata-kata:

const kalimat = "Belajar string JavaScript itu menyenangkan";
const kata = kalimat.split(" ");
console.log(kata);Code language: JavaScript (javascript)

Output:

['Belajar', 'string', 'JavaScript', 'itu', 'menyenangkan']Code language: JSON / JSON with Comments (json)

2. repeat() — Mengulang Teks

Digunakan untuk mengulang teks sebanyak yang diinginkan.

const hias = "-".repeat(10);
console.log(hias);Code language: JavaScript (javascript)

Output:

----------

Contoh nyata:

const judul = "JavaScript".toUpperCase();
console.log(judul);
console.log("=".repeat(judul.length));Code language: JavaScript (javascript)

Output:

JAVASCRIPT
==========

3. padStart() & padEnd() — Menambahkan Karakter di Awal/Akhir

Digunakan untuk formatting angka, kode unik, nomor member, dsb.

padStart

const id = "25";
console.log(id.padStart(5, "0"));Code language: JavaScript (javascript)

Output:

00025

padEnd

const nama = "Aris";
console.log(nama.padEnd(10, "."));Code language: JavaScript (javascript)

Output:

Aris......

4. match() & search() — Pencarian dengan Regex Sederhana

match()

Mengambil kecocokan berupa array hasil pencarian.

const teks = "Belajar string JavaScript";
console.log(teks.match(/a/g));Code language: JavaScript (javascript)

Output:

['a', 'a', 'a']Code language: JSON / JSON with Comments (json)

search()

Mengembalikan index pertama dari teks yang cocok.

const teks = "Tutorial string JavaScript";
console.log(teks.search(/string/i));Code language: JavaScript (javascript)

Output:

9

Perbedaan utama:

Method	Output	Fungsi
match()	Array	Menampilkan seluruh kecocokan
search()	Nomor index	Posisi pertama kecocokan

5. localeCompare() — Membandingkan String Sesuai Bahasa Lokal

Digunakan untuk sorting nama berdasarkan alfabet lokal (misalnya bahasa Indonesia).

const a = "apel";
const b = "jeruk";

console.log(a.localeCompare(b));  Code language: JavaScript (javascript)

Output:

-1

Artinya:

• -1 → a < b
• 0 → sama
• 1 → a > b

Cocok untuk sorting daftar nama.

6. Template Literal JavaScript

Template literal menggunakan backtick `, memiliki kelebihan seperti:

• Bisa multiline
• Bisa menyisipkan variabel (interpolasi)
• Lebih mudah dibaca

Contoh Interpolasi

const nama = "Aris";
const umur = 25;

const info = `Nama: ${nama}, Umur: ${umur}`;
console.log(info);Code language: JavaScript (javascript)

Output:

Nama: Aris, Umur: 25Code language: HTTP (http)

7. Multiline String

Tanpa template literal:

const teks = "baris 1\n" +
             "baris 2\n" +
             "baris 3";Code language: JavaScript (javascript)

Output:

baris 1
baris 2
baris 3

Dengan template literal:

const teks = `
baris 1
baris 2
baris 3
`;Code language: JavaScript (javascript)

Output:

baris 1
baris 2
baris 3

Lebih rapi dan mudah.

8. Interpolasi String

Digunakan untuk menyisipkan perhitungan, variabel, atau fungsi ke dalam string.

const harga = 15000;
const jumlah = 3;

const total = `Total belanja: Rp ${harga * jumlah}`;
console.log(total);Code language: JavaScript (javascript)

Output:

Total belanja: Rp 45000

9. Studi Kasus — Format Teks & Sanitizer Username

Berikut beberapa contoh nyata penggunaan string tingkat lanjut.

Studi Kasus 1: Membuat Slug URL

Input:

"Tutorial String JavaScript Lengkap Untuk Pemula"Code language: JSON / JSON with Comments (json)

Output:

"tutorial-string-javascript-lengkap-untuk-pemula"Code language: JSON / JSON with Comments (json)

const judul = "Tutorial String JavaScript Lengkap Untuk Pemula";

const slug = judul
    .toLowerCase()
    .replace(/[^a-z0-9 ]/g, "")
    .trim()
    .replace(/\s+/g, "-");

console.log(slug);Code language: JavaScript (javascript)

Output:

tutorial-string-javascript-lengkap-untuk-pemula

Studi Kasus 2: Sanitizer Username

Masukan:

"   Aris Munandar!!  "Code language: JSON / JSON with Comments (json)

Output:

"aris_munandar"Code language: JSON / JSON with Comments (json)

Kode:

function sanitizeUsername(username) {
    return username
        .toLowerCase()
        .trim()
        .replace(/[^a-z0-9 ]/g, "")
        .replace(/\s+/g, "_");
}

console.log(sanitizeUsername("   Aris Munandar!!  "));Code language: JavaScript (javascript)

Output:

"aris_munandar"Code language: JSON / JSON with Comments (json)

Studi Kasus 3: Format Nomor Member

Input:

25

Output:

"MEM-00025"Code language: JSON / JSON with Comments (json)

Kode:

const nomor = 25;
const kode = `MEM-${String(nomor).padStart(5, "0")}`;
console.log(kode);Code language: JavaScript (javascript)

Output:

MEM-00025

Studi Kasus 4: Format Pesan Multiline

Input:

const nama = "Aris";
const pesan = `
Halo ${nama},
Terima kasih sudah belajar JavaScript String.

Salam sukses!
`;
console.log(pesan);Code language: JavaScript (javascript)

Output:

Halo Aris,
Terima kasih sudah belajar JavaScript String.

Salam sukses!Code language: JavaScript (javascript)

Demikian tutorial String JavaScript studi kasus ini, semoga menjadi bahan belajar yang bermanfaat.

Kesimpulan

String merupakan salah satu fondasi utama dalam JavaScript, terutama ketika bekerja dengan teks, input pengguna, format data, hingga pembuatan aplikasi modern. Melalui tutorial string JavaScript lengkap ini, kamu telah mempelajari mulai dari dasar-dasar string, cara membuat, memanipulasi, hingga menggunakan berbagai method penting seperti substring, slice, replace, split, trim, dan banyak lagi.

Selain itu, kamu juga telah memahami bagaimana template literal JavaScript bekerja, teknik formatting teks, sanitasi input, dan berbagai studi kasus nyata yang dapat diterapkan pada program sehari-hari.

Dengan seluruh materi ini, kamu kini memiliki pondasi yang kuat untuk menguasai manipulasi teks JavaScript, baik untuk proyek kecil, aplikasi web, hingga kebutuhan profesional sebagai developer.