Masukkan Password
62 Kuasai Metode Trim, trimStart, dan trimEnd JavaScript
Kita bahas trimStart(), trimEnd(), dan trim() secara pelan-pelan dan dikaitkan dengan materi String yang sudah kamu pelajari sebelumnya.
1. Apa itu trim?
trim secara sederhana berarti:
membersihkan spasi/whitespace yang tidak diperlukan di bagian awal atau akhir sebuah String.
Misalnya kita punya:
let fullName = " John Doe ";
Perhatikan:
" John Doe "
↑ ↑
spasi spasi
awal akhir
Kita mungkin tidak ingin menyimpan spasi-spasi tersebut.
JavaScript menyediakan 3 method:
| Method | Yang dihapus |
|---|---|
trimStart() | whitespace di awal String |
trimEnd() | whitespace di akhir String |
trim() | whitespace di awal DAN akhir String |
Mental model paling gampang:
trimStart()
↓
[hapus kiri] " John Doe "
↓
"John Doe "
trimEnd()
↓
" John Doe " [hapus kanan]
↓
" John Doe"
trim()
↓
[hapus kiri + kanan]
" John Doe "
↓
"John Doe"
2. Apa yang dimaksud whitespace?
Jangan hanya menganggap whitespace = spasi biasa " ".
Whitespace adalah karakter yang digunakan untuk memberi jarak/ruang, misalnya:
- spasi
- tab
- newline/baris baru
- beberapa karakter whitespace lainnya
Contoh:
let name = " John ";
Ada whitespace di awal dan akhir.
Tetapi:
let name = "John Doe";
Spasi di antara John dan Doe tidak dihapus oleh trim().
Ini penting!
trim() tidak menghapus semua spasi dalam String.
Dia hanya membersihkan bagian awal dan akhir.
" John Doe "
^^^ ^^^
hapus hapus
↓
"John Doe"
Spasi di tengah:
John[spasi]Doe
tetap ada.
3. trimStart()
trimStart() digunakan untuk menghapus whitespace dari awal String.
Contoh:
let fullName = " John Doe ";
let result = fullName.trimStart();
console.log(result);
Hasil:
"John Doe "
Yang hilang hanya whitespace di sebelah kiri.
Sebelum:
" John Doe "
↑
spasi awal
Sesudah trimStart():
"John Doe "
Spasi di akhir masih ada.
4. trimEnd()
Kebalikannya adalah trimEnd().
let fullName = " John Doe ";
let result = fullName.trimEnd();
console.log(result);
Hasil:
" John Doe"
Yang dihapus hanya whitespace di bagian akhir.
Sebelum:
" John Doe "
↑↑↑
spasi akhir
Sesudah trimEnd():
" John Doe"
Spasi awal masih ada.
5. trim()
Kalau ingin membersihkan kedua sisi sekaligus, gunakan:
trim()
Contoh:
let fullName = " John Doe ";
let result = fullName.trim();
console.log(result);
Hasil:
"John Doe"
Karena:
" John Doe "
↑ ↑
│ │
└─ hapus └─ hapus
↓
"John Doe"
Jadi kalau kebutuhanmu adalah:
“Pokoknya saya ingin menghilangkan whitespace yang tidak sengaja ada di awal dan akhir.”
Biasanya cukup:
value.trim();
6. Ketiga method ini TIDAK mengubah String asli
Ini konsep yang sangat penting dan berhubungan dengan materi String sebelumnya.
Ingat:
String di JavaScript bersifat immutable.
Artinya String yang sudah dibuat tidak bisa dimodifikasi langsung.
Perhatikan:
let fullName = " John Doe ";
fullName.trim();
console.log(fullName);
Hasilnya masih:
" John Doe "
Kenapa?
Karena:
fullName.trim();
hanya menghasilkan String baru.
Hasilnya tidak otomatis dimasukkan kembali ke fullName.
Kalau ingin menyimpan hasilnya
Kita harus melakukan assignment:
let fullName = " John Doe ";
fullName = fullName.trim();
console.log(fullName);
Sekarang:
"John Doe"
Mental model:
fullName
│
▼
" John Doe "
│
│ .trim()
▼
"John Doe"
│
│ assignment =
▼
fullName
Atau bisa menggunakan variabel baru:
let fullName = " John Doe ";
let cleanName = fullName.trim();
console.log(fullName);
console.log(cleanName);
Hasil:
John Doe
John Doe
Jadi:
fullName → String asli
cleanName → String baru hasil trim()
7. Kenapa lecture menggunakan chaining?
Di lecture ada contoh:
let trimString = fullName.trimStart().trimEnd();
Ini disebut method chaining.
Kita menjalankan method pertama:
fullName.trimStart()
Misalnya:
" John Doe "
↓ trimStart()
"John Doe "
Kemudian hasilnya langsung digunakan untuk memanggil:
.trimEnd()
Sehingga:
"John Doe "
↓ trimEnd()
"John Doe"
Jadi:
let trimString = fullName.trimStart().trimEnd();
secara mental bisa dibaca:
“Ambil
fullName, hapus whitespace dari depan, kemudian dari hasilnya hapus whitespace dari belakang.”
8. Tetapi kenapa tidak langsung trim()?
Karena sebenarnya:
fullName.trimStart().trimEnd();
dan:
fullName.trim();
untuk kebutuhan tersebut menghasilkan hal yang sama.
Contoh:
let fullName = " John Doe ";
let result1 = fullName.trimStart().trimEnd();
let result2 = fullName.trim();
console.log(result1);
console.log(result2);
Keduanya:
John Doe
Karena itu, kalau memang ingin membersihkan awal dan akhir, biasanya lebih simpel:
let result = fullName.trim();
9. Perbandingan ketiga method
Misalnya:
let text = " Hello World ";
trimStart()
text.trimStart();
Hasil:
"Hello World "
trimEnd()
text.trimEnd();
Hasil:
" Hello World"
trim()
text.trim();
Hasil:
"Hello World"
Visualnya:
awal akhir
↓ ↓
whitespace whitespace
" Hello World "
↑↑↑ ↑↑↑
│ │
trimStart() → hapus │
trimEnd() → hapus
trim() → hapus + hapus
10. Bagaimana dengan spasi di tengah?
Ini salah satu hal yang paling sering disalahpahami.
Misalnya:
let text = " Hello World ";
console.log(text.trim());
Hasilnya:
"Hello World"
Perhatikan spasi di antara Hello dan World masih ada.
Sebelum:
" Hello World "
↑↑↑ ↑↑↑↑ ↑↑↑
│ │ │
│ │ └─ akhir
│ └──────── tengah
└──────────────────── awal
Sesudah trim():
"Hello World"
trim() hanya bekerja di ujung String, bukan di tengah.
11. Kenapa ini berguna dalam aplikasi nyata?
Nah, ini bagian yang sangat penting dari lecture.
Bayangkan kamu membuat form:
<input type="text" id="fName">
User seharusnya mengetik:
John
Tetapi user bisa saja memasukkan:
" John "
atau bahkan:
" John "
Ketika JavaScript mengambil nilainya:
let fName = document.getElementById("fName").value;
hasilnya bisa memiliki whitespace yang tidak diinginkan.
Kita bisa membersihkannya:
let fName = document.getElementById("fName").value.trim();
Sekarang:
input user:
" John "
↓ .trim()
"John"
12. Contoh dengan email
Misalnya user memasukkan:
" john@gmail.com "
Kalau langsung digunakan:
let email = document.getElementById("email").value;
bisa ada whitespace di sekitar email.
Lebih aman untuk data sederhana seperti ini:
let email = document.getElementById("email").value.trim();
Hasil:
"john@gmail.com"
Ini sangat berguna sebelum:
- menyimpan data
- melakukan validasi
- membandingkan input
- mengirim data ke server
- menampilkan data ke UI
13. Hubungannya dengan materi Form sebelumnya
Kita sebelumnya belajar mengambil value dari form:
let fName = document.getElementById("fName").value;
let lName = document.getElementById("lName").value;
let email = document.getElementById("email").value;
Sekarang kita bisa membuatnya lebih bersih:
let fName = document.getElementById("fName").value.trim();
let lName = document.getElementById("lName").value.trim();
let email = document.getElementById("email").value.trim();
Alurnya:
USER INPUT
↓
<input>
↓
.value
↓
" John "
↓
.trim()
↓
"John"
↓
validasi / simpan / kirim
Ini contoh nyata bagaimana materi String method dipakai bersama DOM dan form.
14. trim() vs trimStart() vs trimEnd(): kapan digunakan?
Gunakan trim()
Kalau kamu ingin membersihkan kedua sisi:
let name = input.value.trim();
Ini yang paling umum untuk input user.
Gunakan trimStart()
Kalau kamu memang hanya ingin menghapus bagian awal:
let text = text.trimStart();
Misalnya kamu ingin mempertahankan whitespace di akhir karena ada alasan khusus.
Gunakan trimEnd()
Kalau kamu hanya ingin menghapus bagian akhir:
let text = text.trimEnd();
15. Jangan tertukar dengan replace()
Misalnya:
let text = " Hello ";
trim():
text.trim();
menghasilkan:
"Hello"
Tetapi trim() tidak bertugas menghapus spasi di tengah.
Kalau ingin melakukan manipulasi whitespace di seluruh String, itu masalah yang berbeda dan biasanya membutuhkan method/regex lain.
Jadi:
trim()
↓
bersihkan ujung String
replace()
↓
mengganti bagian String berdasarkan pola tertentu
Jangan menganggap trim() sebagai:
“hapus semua spasi.”
Lebih tepat:
“hapus whitespace di awal dan akhir.”
16. Hubungan dengan String immutable
Kita sudah belajar beberapa String method:
toUpperCase()
toLowerCase()
slice()
substring()
substr()
repeat()
concat()
padStart()
padEnd()
trim()
Ada pola penting di sini:
Sebagian besar method String menghasilkan String baru, bukan mengubah String asli.
Contoh:
let name = " john ";
let upper = name.toUpperCase();
let clean = name.trim();
console.log(name);
console.log(upper);
console.log(clean);
Hasil:
john
JOHN
john
String asli tetap:
" john "
17. Cara membaca kode trim() dengan mental model
Misalnya:
let name = " john ";
let cleanName = name.trim();
Baca seperti ini:
Langkah 1
name
isinya:
" john "
Langkah 2
Panggil:
name.trim()
JavaScript membuat String baru:
"john"
Langkah 3
Masukkan hasilnya ke:
cleanName
Sehingga:
name
↓
" john "
cleanName
↓
"john"
18. Contoh praktis lengkap dengan form
Misalnya:
<input id="fName" type="text">
<button id="submitButton">Submit</button>
JavaScript:
let submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", function () {
let fName = document.getElementById("fName").value.trim();
console.log("Name:", fName);
});
User memasukkan:
John
Kemudian klik Submit.
JavaScript melakukan:
.value
↓
" John "
↓
.trim()
↓
"John"
↓
console.log()
Jadi data yang kita proses sudah lebih bersih.
19. Satu hal penting: trim() bukan validasi
Ini juga perlu dibedakan.
Misalnya:
let name = " ";
Kemudian:
let cleanName = name.trim();
hasilnya:
""
Jadi trim() hanya membersihkan whitespace.
Dia tidak mengatakan apakah input valid atau tidak.
Misalnya setelah trim:
if (cleanName === "") {
console.log("Nama wajib diisi");
}
Di sini:
trim()
↓
membersihkan input
if
↓
mengecek apakah input valid
Dua tugas yang berbeda.
20. Cheat sheet
| Method | Fungsi | Contoh | Hasil |
|---|---|---|---|
trimStart() | hapus whitespace awal | " Hi ".trimStart() | "Hi " |
trimEnd() | hapus whitespace akhir | " Hi ".trimEnd() | " Hi" |
trim() | hapus whitespace awal + akhir | " Hi ".trim() | "Hi" |
Ingat:
trimStart()
↓
START
✂️
" Hello "
↓
"Hello "
trimEnd()
✂️
END
" Hello "
↓
" Hello"
trim()
✂️ ✂️
↓ ↓
" Hello "
↓
"Hello"
21. Hubungkan dengan semua String method yang sudah dipelajari
Sekarang kamu sudah punya cukup banyak alat untuk memanipulasi String:
STRING METHODS
│
├── slice()
│ → mengambil sebagian String
│
├── substring()
│ → mengambil sebagian String
│
├── toUpperCase()
│ → ubah menjadi huruf besar
│
├── toLowerCase()
│ → ubah menjadi huruf kecil
│
├── padStart()
│ → tambah padding di awal
│
├── padEnd()
│ → tambah padding di akhir
│
├── repeat()
│ → ulangi String
│
├── concat()
│ → gabungkan String
│
├── trimStart()
│ → hapus whitespace awal
│
├── trimEnd()
│ → hapus whitespace akhir
│
└── trim()
→ hapus whitespace awal + akhir
22. Kesimpulan paling penting
Kalau kamu hanya mau mengingat 5 hal dari lecture ini, ingat ini:
1. trimStart()
text.trimStart();
→ menghapus whitespace dari awal String.
2. trimEnd()
text.trimEnd();
→ menghapus whitespace dari akhir String.
3. trim()
text.trim();
→ menghapus whitespace dari awal dan akhir.
4. Tidak mengubah String asli
let text = " Hello ";
text.trim();
console.log(text);
Tetap:
" Hello "
Kalau ingin menyimpan hasil:
text = text.trim();
5. Use case paling umum: membersihkan input user
let name = document.getElementById("name").value.trim();
Alurnya:
INPUT USER
" John "
↓
.trim()
↓
"John"
↓
diproses / divalidasi / disimpan
Mental model utamanya:
🧹
trim()= sapu whitespace yang nyasar di kiri dan kanan String.
Bukan menyapu whitespace di tengah. Jadi " John Doe " menjadi "John Doe", tetapi spasi antara "John" dan "Doe" tetap ada.