String di TypeScript: Interpolasi, Multiline dan Contains

String di TypeScript adalah string JavaScript dengan tipe string. Untuk interpolasi, tulis template literal: backtick dengan placeholder ${expression}. Tanda kutip tunggal dan ganda membuat string biasa tanpa interpolasi.

const author: string = "Ada";
const year = 1843;

// String interpolation with a template literal
const intro = `${author} published her notes in ${year}.`;
console.log(intro);

// Any expression works inside ${ }
const price = 19.5;
const qty = 3;
console.log(`Total: $${(price * qty).toFixed(2)}`); // Total: $58.50
console.log(`${qty > 1 ? "items" : "item"} in cart: ${qty}`);

Ketiga gaya tanda kutip menghasilkan tipe yang sama, string. $ pertama di $${...} adalah tanda dolar biasa; hanya ${ yang memulai placeholder.

Interpolasi String

Di dalam ${ } kamu bisa menaruh variabel, operasi aritmetika, pemanggilan fungsi, ternary, atau template literal bersarang. Nilainya diubah menjadi string dengan cara yang sama seperti String(value) mengubahnya (symbol adalah pengecualian: menginterpolasinya adalah error kompilasi TS2731, dan akan melempar TypeError saat runtime; tulis String(sym)).

type User = { name: string; roles: string[]; lastLogin: Date | null };

const user: User = {
    name: "grace",
    roles: ["admin", "editor"],
    lastLogin: new Date("2024-03-15T10:30:00Z"),
};

const capitalize = (s: string) => s[0].toUpperCase() + s.slice(1);

console.log(`User: ${capitalize(user.name)}`);
console.log(`Roles: ${user.roles.join(", ")}`);
console.log(`Last login: ${user.lastLogin?.toISOString() ?? "never"}`);
console.log(`Raw array: ${user.roles}`); // arrays join with commas

Menginterpolasi object akan mencetak [object Object], yang hampir tidak pernah kamu inginkan. Pilih field-nya, atau pakai JSON.stringify(obj).

String Multiline

Template literal bisa membentang beberapa baris. Baris barunya dipertahankan, begitu juga indentasi di awal setiap baris, karena semua yang ada di antara backtick adalah bagian dari string.

const poem = `Roses are red,
Violets are blue,
Types are erased,
And so are you.`;
console.log(poem);

function card(title: string, body: string): string {
    return `
    [${title}]
    ${body}`; // the leading spaces and first newline are in the string
}
console.log(JSON.stringify(card("Note", "Hi")));

// Alternatives without the indentation problem:
const lines = ["first line", "second line"].join("\n");
console.log(lines);

Kalau indentasi kodemu ikut bocor ke dalam string, bangun string-nya dengan array dan join("\n"), atau buat baris template literal itu rata dengan awal baris.

Mengecek Apakah String Memuat Substring

includes menjawab "apakah memuat" dengan boolean. startsWith dan endsWith mengecek bagian awal dan akhir. indexOf memberikan posisinya, atau -1 kalau substring-nya tidak ada. Semuanya case-sensitive.

const file = "Report-2024.PDF";

console.log(file.includes("2024"));    // true
console.log(file.includes("pdf"));     // false: case-sensitive
console.log(file.toLowerCase().endsWith(".pdf")); // true
console.log(file.startsWith("Report")); // true
console.log(file.indexOf("-"));        // 6
console.log(file.indexOf("x"));        // -1

// A regular expression for patterns, with the i flag for case-insensitive
console.log(/report-\d{4}/i.test(file)); // true

includes juga menerima posisi awal: file.includes("R", 1) hanya mencari mulai dari index 1.

Method yang Umum dan Tipenya

TypeScript tahu tipe kembalian setiap method bawaan. Yang perlu diperhatikan adalah method yang bisa mengembalikan hasil kosong, karena dengan strict kamu harus menangani null atau undefined sebelum memakai hasilnya.

const log = "error=404 path=/users";

const match = log.match(/error=(\d+)/);
// match is RegExpMatchArray | null: check before indexing
if (match) {
    console.log(Number(match[1])); // 404
}

const last = "abc".at(-1); // string | undefined
console.log(last?.toUpperCase()); // C

const parts = log.split(" ").map((p) => p.split("="));
console.log(parts); // [ [ 'error', '404' ], [ 'path', '/users' ] ]

Pengaksesan index biasa, s[5], bertipe string walaupun index-nya melewati batas akhir (dan nilainya undefined saat runtime). Opsi compiler noUncheckedIndexedAccess mengubahnya menjadi string | undefined.

String Bersifat Immutable

Kamu tidak bisa mengubah satu karakter di tempatnya. TypeScript melaporkan assignment ke index sebagai error TS2542, Index signature in type 'String' only permits reading., dan di JavaScript strict mode hasil kompilasinya, assignment yang sama akan melempar TypeError saat runtime. Setiap method yang tampaknya mengubah string sebenarnya mengembalikan string baru.

let word = "hello";

// @ts-expect-error: Index signature in type 'String' only permits reading.
const change = () => { word[0] = "H"; };

word = "H" + word.slice(1); // build a new string instead
console.log(word);          // Hello

Untuk mengubah nilai lain menjadi string, atau string menjadi number, lihat string ke number.

String Literal Type

string menerima teks apa pun. String literal type hanya menerima satu nilai yang persis, dan union dari beberapa literal membentuk himpunan string yang diizinkan, mirip enum:

type Status = "draft" | "published" | "archived";

function label(status: Status): string {
    return `Post is ${status}`;
}

console.log(label("draft"));
// @ts-expect-error: Argument of type '"deleted"' is not assignable to parameter of type 'Status'.
console.log(label("deleted"));

Literal type hanya dicek saat kompilasi; saat runtime label("deleted") tetap akan berjalan dan mencetak Post is deleted, dan itulah yang dilakukan baris kedua di sini. Sintaks template literal juga bekerja di level tipe, seperti type EventName = `on${string}`, yang menerima string apa pun yang diawali on.