Memangkas Teks dengan Batas Panjang di JavaScript

Saat mengelola teks di aplikasi web, sering kali saya perlu menampilkan potongan teks yang lebih pendek dari teks aslinya agar tampilan tetap rapi dan mudah dibaca. Kali ini kita akan membuat fungsi JavaScript yang memangkas teks hingga panjang tertentu dan menambahkan elipsis ("…") jika teks melebihi batas tersebut.

Fungsi limitText

Fungsi limitText dirancang untuk memangkas teks hingga panjang tertentu dan menambahkan elipsis jika panjang teks melebihi batas yang ditentukan. Berikut implementasinya:

function limitText(text, limit) {
    if (text) {
        return text.slice(0, limit) + (text.length > limit ? "..." : "");
    }
}

Penjelasan Kode

1. Cek Teks Kosong:

   Copy

   if (text) {
       // ...
   }

   • Fungsi ini memulai dengan memeriksa apakah variabel text tidak kosong atau null. Hal ini mencegah error jika teks tidak disediakan.

2. Memangkas Teks:

   Copy

   text.slice(0, limit)

   • slice(0, limit) digunakan untuk memangkas teks hingga panjang limit. Metode slice mengembalikan substring dari posisi awal (0) hingga posisi akhir (limit).

3. Menambahkan Elipsis:

   Copy

   + (text.length > limit ? "..." : "")

   • Jika panjang teks melebihi batas yang ditentukan, elipsis ("…") ditambahkan di akhir substring. Jika tidak, tidak ada karakter tambahan yang ditambahkan.

Contoh Penggunaan

Berikut contoh penggunaan fungsi ini:

console.log(limitText("Hello, world! This is a test.", 10));
// Output: "Hello, wor..."

console.log(limitText("Short text.", 20));
// Output: "Short text."

• Contoh 1: "Hello, world! This is a test." dipangkas menjadi 10 karakter menghasilkan "Hello, wor..." karena teks asli lebih panjang dari batas.

• Contoh 2: "Short text." lebih pendek dari 20 karakter, sehingga hasilnya sama dengan teks aslinya.

Kegunaan

Fungsi limitText berguna dalam berbagai skenario, seperti:

• Deskripsi Artikel: Menampilkan potongan deskripsi panjang secara singkat.
• Tautan: Memangkas teks tautan yang panjang agar tampilan tetap rapi.
• UI dan Widget: Membatasi panjang teks pada elemen UI seperti kartu atau panel.

Kesimpulan

Fungsi limitText adalah alat sederhana namun efektif untuk mengelola dan menampilkan potongan teks di aplikasi web. Dengan memangkas teks sesuai panjang yang ditentukan dan menambahkan elipsis bila perlu, pengalaman pengguna menjadi lebih rapi dan mudah dibaca. Sesuaikan panjang batas dan formatnya dengan desain serta kebutuhan aplikasi Anda.