DEV Community: fikriqx

Convert String Title to Slug in Javascript

fikriqx — Sat, 27 Jul 2024 08:36:22 +0000

To convert a title to a slug format using JavaScript, you need to transform the title into a URL-friendly string. This typically involves lowercasing the string, replacing spaces and other non-alphanumeric characters with hyphens, and removing any leading or trailing hyphens. Here is a step-by-step guide on how to achieve this:

Convert the string to lowercase: This ensures consistency in the slug format.

Replace spaces and non-alphanumeric characters with hyphens: 2. This makes the string URL-friendly.
Remove leading and trailing hyphens: Clean up any extra hyphens added at the start or end of the string.

Here's a sample JavaScript function to do this:

function stringToSlug(title) {
  return title
    .toLowerCase()                           // Convert to lowercase
    .replace(/[^a-z0-9 -]/g, '')             // Remove invalid characters
    .replace(/\s+/g, '-')                    // Replace spaces with hyphens
    .replace(/-+/g, '-')                     // Replace multiple hyphens with a single hyphen
    .replace(/^-+|-+$/g, '');                // Remove leading and trailing hyphens
}

// Example usage:
const title = "This is a Sample Title!";
const slug = stringToSlug(title);
console.log(slug);  // Output: "this-is-a-sample-title"

Explanation:

toLowerCase(): Converts the entire string to lowercase.
replace(/[^a-z0-9 -]/g, ''): Removes any characters that are not lowercase letters, numbers, spaces, or hyphens.
replace(/\s+/g, '-'): Replaces one or more spaces with a 4. single hyphen.
replace(/-+/g, '-'): Replaces multiple consecutive hyphens with a single hyphen.
replace(/^-+|-+$/g, ''): Removes leading and trailing hyphens.

This function will help you convert any title string into a clean, URL-friendly slug.

Tenary Operator Bikin Ngoding Jadi Singkat dan Cepat

fikriqx — Sat, 27 Jul 2024 04:18:20 +0000

Tenary operator itu cara singkat untuk nulis if-else di javascript. tinggal pakai tanda tanya ? sama tanda titik dua :

Sintaks Dasar

condition ? expressionIfTrue : expressionIfFalse;

Cara Kerja

condition dievaluasi terlebih dahulu.
Jika condition benar (true), maka expressionIfTrue dieksekusi.
Jika condition salah (false), maka expressionIfFalse dieksekusi.

Contok Praktis

Misal nih kita pingin tentuin apakah seseorang sudah cukup umur untuk ikut voting pemilu atau enggal berdasarkan umur age

let age = 18;
let canVote = age >= 18 ? "Boleh voting" : "Tidak boleh voting";

console.log(canVote); // Output: Boleh voting

noh di age >= 18 di cek kalau misal nilai age lebih besar dari atau sama dengan 18 (>=) maka Bolehh voting kalau enggak sesuai Tidak boleh voting

Contoh lain
Misal kita mau tampilin nilai A,B,C,D,E,F berdasarkan nilai skor.

let score = 85;
let grade = score >= 90 ? "A" :
            score >= 80 ? "B" :
            score >= 70 ? "C" :
            score >= 60 ? "D" : "F";

console.log(grade); // Output: B

yep, bener banget ini bisa kita pakai sampe sepuasnya enggak cuman satu kali aja. intinya mah sama kayak if-else cuman lebih singkat aja.

Untung-nya Pakai Tenary Operator

Ringkas banget: jadi hemat kode, rapih, dan pendek.
Gampang di baca: dibaca lebih gampang.

Kapan Baiknya Pakai Tenary Operator Bang 🤔 ?
saran ku pakai kalau misal kondisinya sederhana aja. Misal kek yg di contoh itu kan cuman sederhana aja kondisinya. Misal kurang dari ini ooh return nya ini dsb... gk terlalu njlimet. Tapi kalo misal kompleks saranku tetep pakai if-else.

Switch Case Statement Cara Terbaik Bikin If-Else Gak Ribet Lagi

fikriqx — Fri, 26 Jul 2024 13:40:59 +0000

Switch case statement bisa kita pake buat gantiin if-else kalau parameter atau kondisi yang mau kita cek cukup banyak.

Ini jadiin switch statement lebih terstruktur dan mudah dibaca.

Sintaks atau Kode Dasar

switch (expression) {
  case value1:
    // kode untuk value1
    break;
  case value2:
    // kode untuk value2
    break;
  // tambahkan lebih banyak case sesuai kebutuhan
  default:
    // kode jika tidak ada case yang cocok
}

Cara Kerja

expression adalah nilai yg ingin kita cek.
nilai dari expression ini bakalan dibandingin dengan nilai dari setiap case value yang ada.
jika nilai expression cocok dengan nilai case nanti kode yg ada di case tersebut dieksekusi.
default ini opsional. bakalan dieksekusi kalau nilai enggak ada yg cocok sama nilai case yg udah kita definisiin.

Contoh Praktis

Kita coba kasus sederhana terkait hari. Misal kita pingin ngebuat nama hari itu berdasarkan nilai angka.

Jadi kalo kita definisiin angka 1 itu kita mau artinya hari Senin, kalo 2 itu kita mau artinya hari Selasa dsb.

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Senin";
    break;
  case 2:
    dayName = "Selasa";
    break;
  case 3:
    dayName = "Rabu";
    break;
  case 4:
    dayName = "Kamis";
    break;
  case 5:
    dayName = "Jumat";
    break;
  case 6:
    dayName = "Sabtu";
    break;
  case 7:
    dayName = "Minggu";
    break;
  default:
    dayName = "Hari tidak valid";
}

console.log(dayName); // Output: Rabu

Nah gitu, misal kita console.log(dayName) di kasus ini bakalan keluar Rabu, soalnya let day = 3. Kalau nilai day = 7 bakalan keluar Minggu dsb.

Boleh mulai dicoba atau pakai kasus sederhana lain 🔥💪🏻

Tips

Gunain switch case ketika punya banyak kondisi yang perlu di cek. misal satu doank mah pakai if-else aja.
Jangan sampe lupa tambahin break itu fungsinya biar eksekusi kode enggak lanjut ke case berikut-nya.
default itu pakai aja sih, biar kita bisa tau atau handle kalau ada yg enggak terduga.

Intinya switch case ini bikin code kita jadi lebih bersih dan mudah dipahamin dibanding kalau kita pakai if-else if-else yang puanjang.