JavaScript - Strings: A Beginner's Guide

Halo, para ahli JavaScript masa depan! Hari ini, kita akan mandulkan diri ke dalam dunia magis string di JavaScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - hingga akhir panduan ini, Anda akan menyingkronkan kode seperti seorang ahli! Mari kita mulai!

Apa Itu Strings?

Dalam JavaScript, string adalah urutan karakter. Mereka bisa adalah huruf, angka, simbol, atau bahkan spasi. Pahami mereka sebagai teks dunia pemrograman Anda.

Sebagai contoh:

let greeting = "Hello, World!";
let number = "42";
let symbol = "@#$%";

Setiap yang itu adalah string, bahkan angka! Dalam JavaScript, jika ada dalam tanda kutip, itu adalah string.

Sintaks

Membuat string di JavaScript adalah hal yang mudah. Anda bisa menggunakan tanda kutip tunggal (''), tanda kutip ganda (""), atau bahkan backticks (``). Mari kita lihat beberapa contoh:

let singleQuotes = 'Saya adalah string';
let doubleQuotes = "Saya juga adalah string";
let backticks = `Dan saya adalah string juga!`;

Tips pro: Backticks memiliki kekuatan khusus - mereka memungkinkan kita untuk menanamkan ekspresi. Kita akan mencapai itu nanti!

Properti Object String JavaScript

Strings di JavaScript datang dengan beberapa properti bawaan. Itu seperti mereka memiliki kartu ID mereka sendiri dengan informasi tentang diri mereka sendiri. Mari kita lihat yang paling umum:

length

Properti length memberitahu kita berapa karakter yang ada dalam string.

let myName = "Alice";
console.log(myName.length); // Output: 5

Di sini, myName.length adalah 5 karena "Alice" memiliki 5 karakter.

Metode Object String JavaScript

Sekarang, mari kita lihat beberapa trik menarik string bisa lakukan. Ini disebut metode, dan mereka seperti kekuatan khusus yang dimiliki string.

Berikut adalah tabel beberapa metode string umum:

Metode	Deskripsi	Contoh
toUpperCase()	Konversi string ke huruf besar	"hello".toUpperCase() mengembalikan "HELLO"
toLowerCase()	Konversi string ke huruf kecil	"WORLD".toLowerCase() mengembalikan "world"
trim()	Hapus spasi dari kedua ujung	" hi ".trim() mengembalikan "hi"
charAt(index)	Mengembalikan karakter di indeks yang ditentukan	"hello".charAt(1) mengembalikan "e"
indexOf(substring)	Mengembalikan indeks pertama kemunculan substring	"hello".indexOf("l") mengembalikan 2
slice(start, end)	Ekstrak bagian dari string	"hello".slice(1, 4) mengembalikan "ell"
replace(old, new)	Mengganti nilai yang ditentukan dengan nilai lain	"hello".replace("h", "j") mengembalikan "jello"

Mari kita masuk ke beberapa dari ini dengan contoh:

toUpperCase() dan toLowerCase()

let shout = "hello".toUpperCase();
console.log(shout); // Output: HELLO

let whisper = "QUIET PLEASE".toLowerCase();
console.log(whisper); // Output: quiet please

Imaginasi Anda sedang membangun aplikasi pesan teks. Metode ini bisa berguna untuk menambahkan fitur CAPS LOCK atau memastikan nama pengguna selalu disimpan dalam huruf kecil.

trim()

let untidy = "  bersihkan   ";
let tidy = untidy.trim();
console.log(tidy); // Output: "bersihkan"

Ini sangat membantu ketika Anda berhadapan dengan masukan pengguna. Pengguna sering secara tak sengaja menambahkan spasi di awal atau akhir teks mereka.

charAt(index)

let word = "JavaScript";
console.log(word.charAt(4)); // Output: S

Ingat, dalam pemrograman, kita mulai menghitung dari 0, bukan 1. Jadi karakter kelima berada di indeks 4!

indexOf(substring)

let sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.indexOf("fox")); // Output: 16

Ini memberitahu kita bahwa "fox" dimulai di karakter ke-17 (ingat, kita menghitung dari 0).

slice(start, end)

let fruit = "apple,banana,cherry";
let banana = fruit.slice(6, 12);
console.log(banana); // Output: banana

Slice seperti menggunakan pisau untuk memotong bagian dari string Anda. Di sini, kita memotong "banana" dari string buah kita.

replace(old, new)

let oldSaying = "The early bird catches the worm";
let newSaying = oldSaying.replace("worm", "success");
console.log(newSaying); // Output: The early bird catches the success

Metode ini sangat baik untuk membuat perubahan cepat pada string Anda.

Contoh

Mari kita gabungkan semua ini dengan contoh yang menarik. Imaginasi kita sedang membangun generator name tag sederhana:

function createNameTag(name, role) {
let upperName = name.toUpperCase();
let trimmedRole = role.trim();
let tag = `Hello, my name is ${upperName} and I am a ${trimmedRole}`;
return tag;
}

let myTag = createNameTag("  alice  ", "  developer   ");
console.log(myTag); // Output: Hello, my name is ALICE and I am a developer

Dalam contoh ini, kita menggunakan toUpperCase() untuk membuat nama menonjol, trim() untuk menghapus spasi yang tak sengaja, dan template literals (backticks) untuk mudah menggabungkan string kita.

Wrapper String HTML

JavaScript juga menyediakan metode untuk membalut string dalam tag HTML. Ini bisa berguna ketika Anda sedang membuat konten HTML dengan JavaScript. Berikut adalah beberapa:

let text = "Bold and Beautiful";
console.log(text.bold()); // Output: <b>Bold and Beautiful</b>
console.log(text.italics()); // Output: <i>Bold and Beautiful</i>
console.log(text.link("https://example.com")); // Output: <a href="https://example.com">Bold and Beautiful</a>

Namun, perlu dicatat bahwa metode ini dianggap usang. Dalam pengembangan web modern, biasanya lebih baik untuk memanipulasi DOM secara langsung atau menggunakan kerangka kerja.

Dan begitu juga! Anda baru saja mengambil langkah pertama Anda ke dunia string JavaScript. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba metode ini. Sebelum Anda tahu, Anda akan menyusun program kompleks dengan mudah. Selamat coding!

Credits: Image by storyset