⚡ Phase 3 — JS
P16 · Pertemuan 16 dari 20
String, Number & Operator Lanjutan
Menguasai berbagai method string dan number, template literal, Math object, dan operator logika JavaScript.
Tujuan Pembelajaran
- 01Menggunakan string method: length, toUpperCase, toLowerCase, includes, indexOf
- 02Menggunakan: slice, replace, split, trim, padStart
- 03Membuat template literal dengan backtick
- 04Menggunakan number method: toFixed, parseInt, parseFloat
- 05Memanfaatkan Math object: round, floor, ceil, max, min, random
- 06Menggunakan operator logika: &&, ||, ! dan nullish coalescing ??
Sub-topik & Materi
- 01String method: .length, .toUpperCase(), .toLowerCase(), .includes(), .indexOf()
- 02String method lanjutan: .slice(), .replace(), .split(), .trim(), .padStart()
- 03Template literal: `Halo ${nama}` — pengganti concatenation
- 04Number: parseInt(), parseFloat(), .toFixed(n)
- 05Math: Math.round(), Math.floor(), Math.ceil(), Math.max(), Math.min(), Math.random()
- 06Operator logika: &&, ||, !, ?? (nullish coalescing)
Penjelasan Konsep
Konsep 1
String Methods yang Sering Dipakai
String di JavaScript punya banyak method bawaan. Yang paling sering dipakai: .length (panjang string), .toUpperCase()/.toLowerCase() (ubah case), .trim() (hapus spasi di awal/akhir), .includes() (cek apakah mengandung kata), .split() (pecah jadi array), .replace() (ganti teks), .slice() (ambil bagian).
javascript
"t-kw">const teks = " Belajar JavaScript "; console.log(teks.length); "t-kw">class="t-cm">// 22 console.log(teks.trim()); "t-kw">class="t-cm">// "Belajar JavaScript" console.log(teks.trim().toLowerCase()); "t-kw">class="t-cm">// "belajar javascript" console.log(teks.trim().includes("Java")); "t-kw">class="t-cm">// true console.log(teks.trim().split(" ")); "t-kw">class="t-cm">// ["Belajar", "JavaScript"] console.log(teks.trim().replace("JavaScript", "JS")); "t-kw">class="t-cm">// "Belajar JS" console.log("Halo Dunia".slice(5)); "t-kw">class="t-cm">// "Dunia" console.log("Halo Dunia".slice(0, 4)); "t-kw">class="t-cm">// "Halo"
Konsep 2
Number dan Math Object
JavaScript menyimpan semua angka sebagai floating point. Konversi: Number() atau parseInt()/parseFloat() untuk string ke number, .toString() untuk number ke string. Math object menyediakan fungsi matematika: Math.round() (bulatkan), Math.floor() (bulatkan ke bawah), Math.ceil() (bulatkan ke atas), Math.random() (angka acak 0-1), Math.max()/Math.min().
javascript
"t-kw">class="t-cm">// Konversi tipe console.log(Number("42")); "t-kw">class="t-cm">// 42 console.log(parseInt("42px")); "t-kw">class="t-cm">// 42 (abaikan huruf) console.log(parseFloat("3.14")); "t-kw">class="t-cm">// 3.14 console.log((42).toString()); "t-kw">class="t-cm">// "42" "t-kw">class="t-cm">// Math object console.log(Math.round(4.6)); "t-kw">class="t-cm">// 5 console.log(Math.floor(4.9)); "t-kw">class="t-cm">// 4 console.log(Math.ceil(4.1)); "t-kw">class="t-cm">// 5 console.log(Math.abs(-10)); "t-kw">class="t-cm">// 10 console.log(Math.max(1, 5, 3)); "t-kw">class="t-cm">// 5 console.log(Math.min(1, 5, 3)); "t-kw">class="t-cm">// 1 "t-kw">class="t-cm">// Random angka 1-10 "t-kw">const acak = Math.floor(Math.random() * 10) + 1; console.log(acak); "t-kw">class="t-cm">// angka random 1-10
Contoh Kode Lengkap
javascript
"t-kw">class="t-cm">// === String Methods === "t-kw">const teks = "t-st">' Budi Santoso '; console.log(teks.trim()); "t-kw">class="t-cm">// "t-st">'Budi Santoso' console.log(teks.trim().toUpperCase()); "t-kw">class="t-cm">// "t-st">'BUDI SANTOSO' console.log(teks.includes("t-st">'Budi')); "t-kw">class="t-cm">// true console.log(teks.indexOf("t-st">'Santoso')); "t-kw">class="t-cm">// 7 console.log(teks.slice(2, 6)); "t-kw">class="t-cm">// "t-st">'Budi' console.log(teks.replace("t-st">'Budi', "t-st">'Ahmad')); "t-kw">class="t-cm">// "t-st">'Ahmad Santoso' console.log("t-st">'html,css,js'.split("t-st">',')); "t-kw">class="t-cm">// ["t-st">'html',"t-st">'css',"t-st">'js'] "t-kw">class="t-cm">// === Template Literal === "t-kw">const nama = "t-st">'Budi'; "t-kw">const kota = "t-st">'Kediri'; console.log("t-st">`Halo, saya ${nama} dari ${kota}!`); "t-kw">class="t-cm">// === Math === console.log(Math.random()); "t-kw">class="t-cm">// 0 sampai 0.999... console.log(Math.floor(Math.random() * 10)); "t-kw">class="t-cm">// 0-9 console.log((3.14159).toFixed(2)); "t-kw">class="t-cm">// "t-st">'3.14' "t-kw">class="t-cm">// === Operator Logika === "t-kw">const nilai = null; "t-kw">const default_nilai = nilai ?? "t-st">'Belum ada'; "t-kw">class="t-cm">// nullish coalescing
Latihan Kelas · Buat program yang mengolah string nama lengkap: inisial, huruf kapital, panjang nama
1
Deklarasikan const namaLengkap = " budi santoso "
2
Bersihkan whitespace dengan .trim()
3
Ubah ke Title Case (huruf pertama setiap kata kapital)
4
Pisahkan nama depan dan nama belakang dengan .split(" ")
5
Buat inisial dari huruf pertama setiap kata
6
Tampilkan semua hasilnya dengan template literal
Kesalahan yang Sering Dibuat
"5" + 5 = "55" (string + number = concatenation) — gunakan Number() untuk konversi
NaN (Not a Number): muncul saat operasi matematika gagal (Number("abc") = NaN)
typeof NaN === "number" — NaN adalah angka yang "tidak valid", bukan tipe tersendiri
Floating point imprecision: 0.1 + 0.2 !== 0.3 (hasilnya 0.30000000000000004) — gunakan .toFixed()
Lupa .trim() sebelum mengolah input user — spasi tersembunyi bisa menyebabkan bug