TypeScript string: אינטרפולציה, מחרוזות מרובות שורות ו-contains

מחרוזת ב-TypeScript היא מחרוזת JavaScript עם הטיפוס string. לאינטרפולציה, כתבו template literal: backticks עם מצייני מקום ${expression}. מירכאות בודדות וכפולות יוצרות מחרוזות רגילות בלי אינטרפולציה.

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}`);

שלושת סוגי המירכאות מייצרים את אותו טיפוס, string. ה-$ הראשון ב-$${...} הוא סימן דולר רגיל; רק ${ פותח מציין מקום.

String interpolation

בתוך ${ } אפשר לשים משתנה, חישוב, קריאה לפונקציה, אופרטור טרנרי או template literal מקונן. הערך מומר למחרוזת באותה דרך ש-String(value) היה ממיר אותו (symbol הוא החריג: אינטרפולציה שלו היא שגיאת הקומפילציה TS2731, ובזמן ריצה היא הייתה זורקת TypeError; כתבו 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

אינטרפולציה של אובייקט מדפיסה [object Object], וזה כמעט אף פעם לא מה שאתם רוצים. בחרו את השדות, או השתמשו ב-JSON.stringify(obj).

מחרוזות מרובות שורות

template literal יכול להשתרע על כמה שורות. מעברי השורה נשמרים, וכך גם כל הזחה בתחילת כל שורה, כי כל מה שבין ה-backticks הוא חלק מהמחרוזת.

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);

כשההזחה של הקוד שלכם עלולה לדלוף לתוך המחרוזת, בנו אותה עם מערך ו-join("\n"), או הצמידו את השורות של ה-template literal לתחילת השורה.

בדיקה אם מחרוזת מכילה תת-מחרוזת

includes עונה על השאלה "האם היא מכילה" עם boolean. startsWith ו-endsWith בודקים את הקצוות. indexOf נותן את המיקום, או -1 כשתת-המחרוזת לא קיימת. כולם רגישים לאותיות גדולות וקטנות.

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 מקבל גם מיקום התחלה: file.includes("R", 1) מחפש רק מאינדקס 1.

מתודות נפוצות והטיפוסים שלהן

TypeScript מכיר את טיפוס ההחזרה של כל מתודה מובנית. כדאי לשים לב במיוחד לאלה שיכולות לחזור ריקות, כי תחת strict חייבים לטפל ב-null או ב-undefined לפני שמשתמשים בתוצאה.

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' ] ]

גישה רגילה לפי אינדקס, s[5], היא מטיפוס string גם כשהאינדקס מעבר לסוף (ושם הערך בזמן ריצה הוא undefined). אפשרות הקומפיילר noUncheckedIndexedAccess הופכת אותו ל-string | undefined.

מחרוזות הן immutable

אי אפשר לשנות תו במקום. TypeScript מדווח על השמה לאינדקס כשגיאה TS2542, Index signature in type 'String' only permits reading., וב-JavaScript של strict mode שהקוד מתקמפל אליו, אותה השמה הייתה זורקת TypeError בזמן ריצה. כל מתודה שנראה שהיא משנה מחרוזת מחזירה מחרוזת חדשה.

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

כדי להפוך ערכים אחרים למחרוזות, או מחרוזות למספרים, ראו string to number.

String literal types

string מקבל כל טקסט. string literal type מקבל ערך מדויק אחד, ואיחוד (union) של כמה כאלה יוצר קבוצה של מחרוזות מותרות, בדומה ל-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 types נבדקים רק בזמן קומפילציה; בזמן ריצה label("deleted") עדיין ירוץ וידפיס Post is deleted, וזה מה שהשורה השנייה עושה כאן. התחביר של template literal עובד גם ברמת הטיפוסים, כמו ב-type EventName = `on${string}`, שמקבל כל מחרוזת שמתחילה ב-on.