Lecture ini membahas dua String method untuk mengambil sebagian karakter dari sebuah string, yaitu:

• substring()
• substr() → deprecated, jadi sebaiknya tidak digunakan untuk kode baru.

Konsepnya sebenarnya sangat mirip dengan slice() pada Array yang sudah kamu pelajari, tetapi ada perbedaan penting terutama pada parameter kedua.

1. Gambaran besar lecture

Misalnya kita punya:

let welcome = "Hello, World";

Kita ingin mengambil sebagian dari string tersebut.

Misalnya hanya ingin mengambil:

World

JavaScript menyediakan:

welcome.substring(...)

dan dahulu juga ada:

welcome.substr(...)

Keduanya menghasilkan string baru dan tidak mengubah string asli.

Secara sederhana:

"Hello, World"
       ↓
   ambil sebagian
       ↓
    "World"

2. Ingat: String menggunakan index

Sama seperti Array, karakter dalam String juga memiliki index yang dimulai dari 0.

Misalnya:

let welcome = "Hello, World";

Kita bisa membayangkannya seperti ini:

String : H e l l o ,   W o r l d
Index  : 0 1 2 3 4 5 6 7 8 9 10 11

Perhatikan:

H → 0
e → 1
l → 2
l → 3
o → 4
, → 5
  → 6
W → 7
o → 8
r → 9
l → 10
d → 11

Jadi kalau kita mengatakan:

“Mulai dari index 7”

berarti mulai dari:

W

3. substring()

Syntax:

string.substring(startIndex, endIndex)

Ada dua parameter:

Bagian paling penting:

endIndex tidak ikut dimasukkan ke hasil.

4. Contoh paling sederhana

let welcome = "Hello, World";

let subString = welcome.substring(7);

console.log(subString);

Hasil:

World

Kenapa?

Karena kita mulai dari index 7.

H e l l o ,   W o r l d
0 1 2 3 4 5 6 7 8 9 10 11
              ↑
           mulai

Karena kita tidak memberikan endIndex, JavaScript mengambil semuanya sampai akhir.

Jadi:

welcome.substring(7)

artinya:

“Ambil karakter mulai index 7 sampai akhir.”

5. Kalau menggunakan endIndex

Misalnya kita ingin mengambil:

Worl

Perhatikan index-nya:

W → 7
o → 8
r → 9
l → 10
d → 11

Kita ingin mengambil index:

7, 8, 9, 10

Tetapi tidak ingin mengambil index 11.

Maka:

let subString = welcome.substring(7, 11);

console.log(subString);

Hasil:

Worl

Kenapa 11 tidak ikut?

Karena aturan substring() adalah:

startIndex → INCLUDE
endIndex   → EXCLUDE

Atau bisa diingat:

Mulai dari start, berhenti sebelum end.

6. Visualisasi substring()

Misalnya:

welcome.substring(7, 11)

Bayangkan:

H e l l o ,   W o r l d
0 1 2 3 4 5 6 7 8 9 10 11
              |-----------|
              ↑           ↑
            mulai      berhenti
                         sebelum 11

Yang diambil:

7 → W
8 → o
9 → r
10 → l

Hasil:

"Worl"

Index 11 adalah d, tetapi tidak termasuk.

7. Ini mirip dengan slice() pada Array

Sebelumnya kamu belajar:

let numbers = [10, 20, 30, 40, 50];

numbers.slice(1, 4);

Hasil:

[20, 30, 40]

Karena:

start → masuk
end   → tidak masuk

Jadi pola ini sangat mirip:

substring(7, 11)

dan:

array.slice(7, 11)

Sama-sama menggunakan konsep:

[start, end)

Artinya:

mulai dari start, tetapi berhenti sebelum end.

8. substring() tidak mengubah String asli

Ini juga konsep penting.

Misalnya:

let welcome = "Hello, World";

let subString = welcome.substring(7);

console.log(subString);
console.log(welcome);

Hasil:

World
Hello, World

Artinya:

welcome
   ↓
"Hello, World"
   │
   │ substring(7)
   ↓
"World"

String asli tetap:

"Hello, World"

9. Kenapa tidak berubah?

Karena method seperti substring() menghasilkan String baru.

Jadi:

let subString = welcome.substring(7);

seolah-olah kita mengatakan:

String asli
"Hello, World"
       │
       │ ambil sebagian
       ↓
String baru
"World"

Variabel:

welcome

tetap menunjuk ke:

"Hello, World"

sedangkan:

subString

menyimpan:

"World"

10. Sekarang masuk ke substr()

Ada method lain:

substr()

Contohnya:

let substr = welcome.substr(7);

Hasil:

World

Sekilas terlihat sama dengan:

welcome.substring(7);

Tetapi sebenarnya cara kerja parameter keduanya berbeda.

Ini adalah bagian paling penting dari lecture.

11. Perbedaan substring() dan substr()

substring()

substring(startIndex, endIndex)

Parameter kedua:

index akhir

substr()

substr(startIndex, length)

Parameter kedua:

berapa banyak karakter yang ingin diambil

Jadi jangan sampai tertukar.

12. Contoh perbedaan yang sangat jelas

Misalnya:

let welcome = "Hello, World";

Kita mulai dari index 7:

H e l l o ,   W o r l d
0 1 2 3 4 5 6 7 8 9 10 11
              ↑
            mulai

Sekarang kita ingin mengambil 3 karakter:

W o r

Dengan substr():

let result = welcome.substr(7, 3);

Hasil:

Wor

Karena:

start = 7
length = 3

Maka:

index 7 → W
index 8 → o
index 9 → r

Total:

3 karakter

13. Tetapi substring(7, 3) bukan berarti 3 karakter

Ini kesalahan yang sering terjadi.

Kalau kita menulis:

welcome.substring(7, 3);

kita tidak sedang mengatakan:

“Mulai dari 7 dan ambil 3 karakter.”

Karena pada substring():

substring(startIndex, endIndex)

Jadi 3 dianggap sebagai:

end index 3

bukan jumlah karakter.

14. Tabel perbandingan utama

Ini wajib kamu ingat:

Contoh:

welcome.substring(7, 10);

Artinya:

mulai index 7, berhenti sebelum index 10.

Hasil:

Wor

Karena:

7 → W
8 → o
9 → r
10 → berhenti

Sedangkan:

welcome.substr(7, 10);

Artinya:

mulai index 7, ambil 10 karakter.

Jadi maknanya sangat berbeda.

15. Analogi sederhana

Bayangkan kamu punya buku dengan halaman:

0 1 2 3 4 5 6 7 8 9 10 11

substring()

Kamu berkata:

“Mulai dari halaman 7 dan berhenti sebelum halaman 10.”

7 8 9

Jadi 10 adalah batas akhir.

substr()

Kamu berkata:

“Mulai dari halaman 7 dan ambil 3 halaman.”

7 8 9

Jadi angka kedua adalah jumlah yang diambil.

16. Kalau parameter kedua tidak diberikan

Ini juga berlaku untuk keduanya.

substring()

welcome.substring(7);

Artinya:

mulai dari index 7 dan ambil sampai akhir.

Hasil:

World

substr()

welcome.substr(7);

Artinya:

mulai dari index 7 dan karena jumlah karakter tidak diberikan, ambil sampai akhir.

Hasil:

World

Jadi dalam kasus ini keduanya menghasilkan hasil yang sama.

17. Kenapa lecture mengatakan substr() deprecated?

Ini sangat penting.

substr() adalah method lama yang sekarang deprecated.

Artinya bukan:

“langsung rusak dan tidak bisa dipakai.”

Tetapi lebih ke:

“Method ini sudah tidak direkomendasikan untuk kode baru.”

Browser modern mungkin masih mendukungnya demi kompatibilitas dengan kode lama, tetapi sebaiknya kamu tidak membangun kode baru dengan substr().

Jadi kalau kamu menemukan:

str.substr(7, 3);

di project lama, kamu perlu tahu artinya.

Tetapi kalau menulis kode baru, jangan memilih substr().

18. Lalu harus menggunakan apa?

Untuk pembelajaran di lecture ini, gunakan:

substring()

Tetapi ada satu catatan modern yang penting:

Untuk banyak kebutuhan ekstraksi String, JavaScript modern juga sangat sering menggunakan:

slice()

Contoh:

let welcome = "Hello, World";

console.log(welcome.slice(7));

hasil:

World

Dan:

console.log(welcome.slice(7, 10));

hasil:

Wor

Jadi kamu nanti akan banyak bertemu slice() pada String juga.

19. Hubungan slice(), substring(), dan substr()

Untuk saat ini, mental model sederhananya:

STRING
  │
  ├── substring(start, end)
  │       └── end = index batas akhir
  │
  ├── substr(start, length)  ← deprecated
  │       └── length = jumlah karakter
  │
  └── slice(start, end)
          └── end = index batas akhir

Contoh:

let text = "Hello, World";

substring

text.substring(7, 10);

→ "Wor"

substr

text.substr(7, 3);

→ "Wor"

slice

text.slice(7, 10);

→ "Wor"

Perhatikan:

substring(7, 10)
             ↑
          END INDEX

substr(7, 3)
          ↑
       JUMLAH KARAKTER

20. Semua method tersebut tidak mengubah String asli

Misalnya:

let text = "Hello, World";

let a = text.substring(7, 10);
let b = text.substr(7, 3);
let c = text.slice(7, 10);

console.log(text);

text tetap:

Hello, World

Karena String di JavaScript bersifat immutable.

Artinya secara sederhana:

isi String yang sudah dibuat tidak diubah langsung oleh method-method String.

Method String biasanya menghasilkan String baru.

Contoh:

let text = "Hello";

let result = text.toUpperCase();

console.log(text);   // Hello
console.log(result); // HELLO

Pola yang sama berlaku di sini.

21. Kesalahan yang paling mungkin terjadi

❌ Salah memahami substring

text.substring(7, 3);

Bukan:

“ambil 3 karakter dari index 7.”

Tetapi:

“mulai index 7, dengan end index 3.”

❌ Menggunakan substr() untuk kode baru

text.substr(7, 3);

Secara hasil mungkin benar, tetapi method-nya deprecated.

Lebih baik gunakan method modern seperti:

text.substring(7, 10);

atau sesuai kebutuhan:

text.slice(7, 10);

22. Cara mengingatnya dengan mudah

Saya sarankan kamu menghafalkan dua pola ini:

substring

substring(START, END)

Baca:

“Dari START sampai sebelum END.”

substr

substr(START, LENGTH)

Baca:

“Dari START sebanyak LENGTH karakter.”

23. Contoh kehidupan nyata

Misalnya:

let cardNumber = "1234567890123456";

Kita ingin mengambil 4 digit terakhir.

Dengan substring() kita perlu mengetahui index:

cardNumber.substring(12, 16);

Hasil:

3456

Sedangkan konsep substr() lebih terasa natural:

cardNumber.substr(12, 4);

Artinya:

mulai index 12, ambil 4 karakter.

Tetapi sekali lagi, karena substr() deprecated, untuk kode baru kamu sebaiknya menggunakan pendekatan modern seperti:

cardNumber.slice(-4);

Hasil:

3456

24. Connection dengan materi sebelumnya

Sebelumnya kamu belajar Array:

let numbers = [10, 20, 30, 40, 50];

let result = numbers.slice(1, 4);

Sekarang kamu belajar String:

let text = "Hello, World";

let result = text.substring(7, 10);

Konsep besarnya sama:

DATA
  ↓
ambil sebagian
  ↓
HASIL BARU

Dan yang penting:

Array → collection of elements
String → collection of characters

Walaupun String bukan Array, kita bisa mengakses karakter menggunakan index:

text[0]
text[1]
text[2]

Misalnya:

let text = "Hello";

console.log(text[0]); // H
console.log(text[1]); // e
console.log(text[2]); // l

Jadi wajar kalau konsep ekstraksi berdasarkan index terasa mirip dengan Array.

25. Ringkasan visual

let text = "Hello, World";

Index:
H e l l o ,   W o r l d
0 1 2 3 4 5 6 7 8 9 10 11

substring(7)

             ┌───────────────
             ↓
H e l l o ,   W o r l d
              └─────────────

Result → "World"

substring(7, 10)

             ┌───────┐
             ↓       ↓
H e l l o ,   W o r l d
0 1 2 3 4 5 6 7 8 9 10 11
              W o r
              
Result → "Wor"

Karena index 10 tidak termasuk.

substr(7, 3)

             ↓
H e l l o ,   W o r l d
              W o r
              └───┘
              3 karakter

Result → "Wor"

26. Cheat sheet

Dan yang paling penting:

substring(start, end)
                   ↑
                INDEX AKHIR

substr(start, length)
                    ↑
                JUMLAH KARAKTER

27. Inti yang harus kamu ingat

Kalau setelah lecture ini kamu hanya mengingat 5 hal, ingat ini:

1. String memiliki index yang dimulai dari 0.

2. substring() digunakan untuk mengambil sebagian String:

   text.substring(start, end);
   

3. Pada substring(), end tidak termasuk:

   start → masuk
   end   → tidak masuk
   

4. substr() menggunakan parameter kedua sebagai jumlah karakter, bukan end index:

   text.substr(start, length);
   

5. substr() deprecated, jadi untuk kode baru jangan menggunakannya. Pahami saja karena kamu akan menemukannya pada kode/lecture lama.

Mental model paling penting:

substring(2, 5)
          ↓  ↓
       MULAI BATAS
       INDEX INDEX
       
substr(2, 5)
       ↓  ↓
    MULAI JUMLAH
    INDEX KARAKTER

Jadi kalau kamu melihat angka kedua, langsung tanya:

“Angka ini index akhir atau jumlah karakter?”

Kalau substring() → index akhir. Kalau substr() → jumlah karakter.