String dan Template Literal

Text yang kamu tampilkan di layar, input dari form, nama produk yang kembali dari API — banyak value yang ditangani web app adalah string (value yang terdiri dari sederet karakter).

Artikel ini membahas membangun string dengan 3 gaya tanda kutip dan template literal, lalu method untuk merapikan input jadi bentuk yang bisa ditampilkan: memangkas whitespace, mengecek apakah sesuatu terkandung, memisah dan menggabungkan ulang, dan meratakan digit.

Membangun dan Merapikan String — 3 Gaya Tanda Kutip dan Template Literal

Misalnya kamu mau layar konfirmasi order membaca "Insulated Mug x 3 / Total 3600" — nama produk, quantity, dan amount masing-masing tinggal di variable-nya sendiri. Merakitnya jadi 1 kalimat itulah gunanya string building. Mari mulai dari cara menulis string itu sendiri.

String ditulis dibungkus tanda kutip satu ', tanda kutip dua ", atau backtick. Kalau karakter tanda kutip yang sama dengan yang kamu pakai membungkusnya muncul di dalam, itu terbaca sebagai akhir string, jadi untuk memasukkan karakter tanda kutip di dalamnya, bungkus dengan gaya tanda kutip berbeda atau taruh \ di depannya untuk membatalkan makna khususnya.

Kamu akan melihat backtick sungguhan di contoh kode berikutnya.

const productName = "Insulated Mug";   // dibungkus tanda kutip dua
const categoryName = 'Kitchen Goods';   // dibungkus tanda kutip satu

// Escape dengan \ untuk memasukkan tanda kutip yang sama dengan yang membungkusnya
const notice = "Staff \"Pick\"";

// Bungkus dengan gaya tanda kutip berbeda dan tidak perlu escape
const notice2 = 'Staff "Pick"';

console.log(productName.length);   // 13  jumlah karakter kembali sebagai number
console.log(notice);               // Staff "Pick"
console.log(notice2);              // Staff "Pick"

length, yang mengembalikan jumlah karakter, adalah sebuah property (informasi yang melekat pada sebuah value, dibaca dengan namanya tanpa tanda kurung). Beda dengan method seperti toFixed dari artikel sebelumnya, kamu tidak menulis tanda kurung — bukan productName.length().

String bisa disambung dengan +, tapi makin banyak variable yang kamu tambahkan, makin banyak tanda kutip dan tanda + yang menumpuk dan susah dibaca. Untuk itulah template literal (bungkus string dengan backtick, dan value apa pun yang ditulis di dalam ${ } akan disisipkan ke dalamnya).

Di dalam ${ } kamu bisa menulis bukan cuma variable tapi juga expression seperti unitPrice * quantity, dan hasil hitungannya yang akan disisipkan.

const productName = "Insulated Mug";
const unitPrice = 1200;
const quantity = 3;

// Menyambung dengan + mencampur tanda kutip dan + jadi satu
console.log(productName + " x " + quantity + " / Total " + unitPrice * quantity);

// Dengan ${ }, value dan expression bisa ditulis apa adanya
console.log(`${productName} x ${quantity} / Total ${unitPrice * quantity}`);
// Keduanya menampilkan: Insulated Mug x 3 / Total 3600

Merapikan untuk Tampilan — trim / slice / toUpperCase

Nama yang diketik ke form bisa punya whitespace nyasar di sekitarnya, atau casing yang tidak konsisten. Menampilkannya apa adanya bisa terlihat rusak, jadi kamu rapikan bentuknya tepat sebelum ditampilkan.

trim membuang whitespace di sekelilingnya, toUpperCase menormalkan jadi huruf kapital, dan slice memotong sebagian string.

slice mengambil posisi awal dan posisi akhir. Posisi dihitung dari 0, dan karakter di posisi akhir tidak termasuk.

slice(0, 1) memberimu karakter pertama; hilangkan posisi akhirnya, seperti slice(1), dan kamu dapat semuanya dari situ sampai akhir.

const rawInput = "  Yamada  ";   // value yang diterima dari input field

console.log(rawInput.trim());               // Yamada
console.log(rawInput.trim().length);        // 6
console.log(rawInput.trim().toUpperCase()); // YAMADA
console.log(rawInput.trim().slice(0, 3));   // Yam  3 karakter pertama

// Kamu bisa merangkai hasil slice dengan +
console.log(rawInput.trim().slice(0, 1).toUpperCase() + "…");  // Y…

console.log(rawInput.length);               // 10  aslinya masih punya whitespace

Method Tidak Mengubah String Aslinya

trim dan toUpperCase hanya mengembalikan hasil yang sudah dirapikan sebagai string baru — variable yang kamu panggil itu tetap persis sama. Untuk memakai hasilnya, simpan ke variable atau rangkai ke pemanggilan method berikutnya, seperti di contoh di atas.

Rapikan display name dari input field jadi sesuatu yang bisa kamu tampilkan di layar. Display name rawName dan member ID memberId sudah dideklarasikan.

① Tampilkan nama dengan whitespace di depan dan belakang dihapus.

② Tampilkan nama yang sama dengan hanya huruf pertamanya dikapitalkan.

③ Gabungkan member ID dan nama dari ② jadi 1 sapaan. Format-nya "Welcome, Hanako! (member #1042)".

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Mencari di Dalam String — includes / startsWith / indexOf

Kalau email address yang diketik user tidak punya @, kamu mau menolaknya sebelum disimpan. Atau mungkin kamu mau menangani order code secara berbeda tergantung apakah dia diawali ORD-. Pengecekan seperti ini memakai method yang mencari di dalam string.

includes mengembalikan true atau false untuk apakah string tertentu muncul di mana pun, dan startsWith untuk apakah string-nya diawali dengan itu.

Saat kamu perlu posisi sebenarnya, pakai indexOf, yang mengembalikan posisi, sebagai number, dari kecocokan pertama. Kalau tidak ada yang cocok, dia mengembalikan -1, jadi ini juga berfungsi ganda sebagai cara mengecek apakah sesuatu terkandung sama sekali.

const orderCode = "ORD-2026-0042";

console.log(orderCode.includes("2026"));    // true   terkandung di suatu tempat
console.log(orderCode.startsWith("ORD-"));  // true   awalannya cocok

console.log(orderCode.indexOf("-"));        // 3      posisi, dihitung dari 0
console.log(orderCode.indexOf("SHIP"));     // -1     tidak ditemukan

console.log(orderCode.slice(4));            // 2026-0042  posisi 4 sampai akhir

Gabungkan posisi yang dikembalikan indexOf dengan slice, dan kamu bisa mengambil hanya apa yang ada setelah karakter pemisah. Begitu kamu tahu posisi @, memberikan slice posisi tepat setelahnya memberimu bagian domain sebuah email address.

Cek email address yang diketik ke form signup. Kontak terdaftar contactEmail dan string yang diketik ke input, typedEmail, sudah dideklarasikan.

① Tampilkan apakah typedEmail mengandung tanda @.

② Tampilkan bagian domain dari contactEmail — semua setelah tanda @.

③ Tampilkan apakah contactEmail diawali sato.

Memisah dan Menggabungkan Ulang — split dan join

Kadang, seperti baris CSV atau input field tag, 1 string dipadatkan dengan banyak value. Menangani tiap item secara terpisah berarti memisah pada karakter pemisah, dan sebaliknya — untuk tampilan — berarti menggabungkannya lagi jadi 1. split melakukan pemisahan; join melakukan penggabungan ulang.

split mengambil karakter untuk dipisah. split(",") memisah di tiap koma, dan hasilnya kembali sebagai array (banyak value yang disusun berurutan dan dibundel jadi 1 value). join berjalan ke arah sebaliknya — berikan karakter untuk ditaruh di antara item, dan dia menggabungkannya kembali jadi 1 string.

const tagLine = "Kitchen,Insulated,Gift";   // isi input field tag

const tags = tagLine.split(",");   // pisah di tiap koma
console.log(tags.length);          // 3   jumlah potongan
console.log(tags[0]);              // Kitchen    posisi 0 = value pertama
console.log(tags[2]);              // Gift       posisi 2 = value ketiga

console.log(tags.join(" / "));     // Kitchen / Insulated / Gift
console.log("2026-09-02".split("-").join("/"));  // 2026/09/02

Ambil Value Hasil Split Berdasarkan Posisi

Dari array yang dikembalikan split, ambil item satu per satu dengan menulis posisinya, dihitung dari 0, di dalam kurung siku — seperti tags[0]. Operasi pada array itu sendiri, seperti menambah atau menghapus item, dibahas lagi di artikel array.

Kamu menerima item order sebagai 1 baris CSV. csvLine, sebuah string dengan member ID, nama produk, harga satuan, dan quantity dipisah koma, sudah dideklarasikan.

① Tampilkan berapa banyak field yang kamu dapat setelah memisah pada koma.

② Tampilkan hanya nama produk dari field yang sudah dipisah.

③ Gabungkan lagi semua field dengan " | " di antaranya dan tampilkan dalam 1 baris.

Mengganti dan Padding — replaceAll dan padStart

Mungkin kamu mau membuang tanda hubung dari nomor telepon sebelum disimpan, atau menambahkan padding pada order number jadi 6 digit dengan nol di depan untuk tampilan. Untuk pekerjaan "bentuk ulang string yang diterima jadi format tetap" seperti ini, pakai replaceAll dan padStart.

replaceAll mengambil string yang dicari dan string penggantinya. Ganti dengan string kosong "" (string tanpa panjang, tidak ada apa pun di antara tanda kutipnya), dan itu punya efek yang sama seperti menghapus karakternya.

padStart mengambil panjang target dan karakter untuk padding (default-nya spasi kalau kamu tidak menyebutkannya), dan menambahkan karakter padding itu di depan sebanyak kekurangan panjangnya. Kalau string aslinya sudah minimal sepanjang itu, tidak ada yang ditambahkan — dikembalikan apa adanya.

const rawCode = "ord 2026 0042";   // order code diketik dengan spasi

console.log(rawCode.replaceAll(" ", "-"));  // ord-2026-0042
console.log("090-1234-5678".replaceAll("-", ""));  // 09012345678

console.log("42".padStart(6, "0"));   // 000042  padding 0 sampai 6 digit
console.log("42".padStart(6));        //     42  tanpa karakter padding berarti spasi
console.log("1200".padStart(3, "0")); // 1200    sudah 3+ digit, jadi tidak berubah

Bentuk ulang order number yang ditugaskan dan nomor telepon yang diketik jadi bentuk yang bisa kamu simpan. Order number orderNumber dan nomor telepon rawPhone sudah dideklarasikan.

① Tampilkan order number dengan padding 6 digit pakai nol di depan.

② Tampilkan order code yang menambahkan ORD- di depan hasil ①.

③ Tampilkan nomor telepon dengan semua tanda hubung dihapus.