מחרוזות ו-Template Literals ב-JavaScript: Backticks, שילוב ערכים ומתודות

שלוש דרכים לכתוב מחרוזת

JavaScript נותנת לכם שלושה סוגי תוחמים למחרוזות. שניים מהם ניתנים להחלפה זה בזה; השלישי עושה יותר.

const single = 'hello';
const double = "hello";
const backtick = `hello`;

console.log(single === double, double === backtick);

מרכאות בודדות וכפולות יוצרות מחרוזות זהות לגמרי. בחרו אחת והיצמדו אליה (רוב בסיסי הקוד המודרניים משתמשים כברירת מחדל במרכאות בודדות, או נותנים לכלי עיצוב להחליט). Backticks יוצרים template literal, ושם העניינים נהיים מעניינים: הם מאפשרים לשלב ערכים בטקסט ולפרוס אותו על פני כמה שורות.

מאחורי הקלעים, שלושתם יוצרים את אותו טיפוס פרימיטיבי של מחרוזת. התוחם הוא רק בחירה תחבירית.

תווי Escape ומרכאות בתוך מחרוזת

בתוך מחרוזת, לוכסן הפוך פותח רצף escape. הנפוצים הם \n (שורה חדשה), \t (טאב), \\ (לוכסן הפוך עצמו), ו-\" / \' כדי לשלב את אותו סוג מרכאות שבו פתחתם:

const quote = "She said \"hi\" and left.";
const path = "C:\\Users\\Rosa";
const lines = "first\nsecond\nthird";

console.log(quote);
console.log(path);
console.log(lines);

אפשר להימנע מרוב תווי ה-escape אם בוחרים את סוג המרכאות השני: 'She said "hi" and left.' לא צריך אף לוכסן הפוך. עדיף פרגמטיות על פני דוגמטיות.

Template Literals: כוח העל של ה-Backtick

Template literal עושה שני דברים שמחרוזות רגילות לא יכולות. ראשית, הוא משלב ביטויים בטקסט עם ${...}:

const name = "Ada";
const age = 36;

const greeting = `Hello, ${name}. You are ${age} years old.`;
console.log(greeting);

כל מה שנמצא בתוך ${...} הוא ביטוי JavaScript, לא רק שם של משתנה. חשבון, קריאות לפונקציות, אופרטור טרנרי, ואפילו template literals אחרים, הכול מותר:

const price = 19.99;
const qty = 3;
const user = { name: "rosa" };

console.log(`Total: $${(price * qty).toFixed(2)}`);
console.log(`Hi, ${user.name.toUpperCase()}!`);
console.log(`Status: ${qty > 0 ? "in stock" : "sold out"}`);

שנית, template literals נפרסים על פני כמה שורות בלי צורך ב-\n:

const message = `Dear customer,

Your order has shipped.
Expect delivery in 3-5 days.

Thanks.`;

console.log(message);

ירידות שורה בקוד המקור הופכות לירידות שורה במחרוזת. לכל דבר ארוך יותר מתווית קצרה, backticks הם כמעט תמיד הבחירה הנכונה.

שילוב ערכים עדיף על שרשור

לפני template literals, הדרך היחידה לבנות מחרוזת דינמית הייתה האופרטור +:

const name = "Ada";
const age = 36;

const old = "Hello, " + name + ". You are " + age + " years old.";
const modern = `Hello, ${name}. You are ${age} years old.`;

console.log(old);
console.log(modern);

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

מחרוזות הן Immutable

כל מתודה שנראה שהיא משנה מחרוזת בעצם מחזירה מחרוזת חדשה:

const s = "hello";

s.toUpperCase();           // returns "HELLO" - discarded
console.log(s);            // still "hello"

const loud = s.toUpperCase();
console.log(loud);         // "HELLO"

אם אתם רוצים את השינוי, צריך לשמור את התוצאה איפשהו. זה תופס מתחילים שכותבים s.replace("a", "b") ומצפים ש-s ישתנה. הוא לא משתנה. מחרוזות ב-JavaScript הן כמו מספרים: את הערך עצמו אי אפשר לשנות, אפשר רק לגרום למשתנה להצביע על ערך חדש.

מתודות המחרוזת שבאמת תשתמשו בהן

ה-API המלא של מחרוזות גדול. הנה קומץ המתודות שתשתמשו בהן כל יום:

const s = "  Hello, World!  ";

console.log(s.length);                     // 17
console.log(s.trim());                     // "Hello, World!"
console.log(s.toLowerCase());              // "  hello, world!  "
console.log(s.includes("World"));          // true
console.log(s.startsWith("  He"));         // true
console.log(s.replace("World", "Ada"));    // "  Hello, Ada!  "
console.log(s.split(","));                 // ["  Hello", " World!  "]
console.log(s.slice(2, 7));                // "Hello"

כמה הערות ששווה לזכור:

• length הוא מאפיין, לא מתודה, ולכן אין סוגריים.
• replace עם מחרוזת רגילה מחליף רק את ההתאמה הראשונה. השתמשו ב-replaceAll או בביטוי רגולרי עם הדגל g כדי להחליף את כל המופעים.
• slice(start, end) מקבל טווח חצי פתוח: התו שבמיקום end לא נכלל.
• אינדקסים שליליים ב-slice נספרים מהסוף: s.slice(-3) מחזיר את שלושת התווים האחרונים.

גישה לתווים ומעבר עליהם

מחרוזות מתנהגות כמו מערכים של תווים לקריאה בלבד. אפשר לגשת אליהן לפי אינדקס ולעבור עליהן בלולאה, אבל אי אפשר להציב ערך במיקום מסוים:

const s = "hello";

console.log(s[0]);      // "h"
console.log(s[4]);      // "o"
console.log(s[99]);     // undefined

s[0] = "H";             // silently ignored (or throws in strict mode)
console.log(s);         // still "hello"

for (const ch of s) {
    console.log(ch);
}

for...of עובר על code points, ולכן מטפל נכון ברוב ה-Unicode. שימוש באינדקסים (s[i]) עובר על יחידות קוד של UTF-16, מה שעלול לפצל אימוג'י ותווים אחרים מחוץ ל-BMP לשניים. לטקסט רגיל שתי הדרכים בסדר; לכל טקסט שמגיע ממשתמשים, העדיפו for...of או [...s].

Tagged Template Literals

יש עוד צורה אחת ששווה להכיר, גם אם לא תכתבו אותה לעיתים קרובות. Tagged template literal קורא לפונקציה ומעביר לה את חלקי הטקסט הקבועים ואת הערכים המשובצים כארגומנטים נפרדים:

function highlight(strings, ...values) {
    return strings.reduce((out, str, i) => {
        const val = values[i] !== undefined ? `[${values[i]}]` : "";
        return out + str + val;
    }, "");
}

const name = "Ada";
const score = 95;

console.log(highlight`User ${name} scored ${score} points.`);

פונקציית ה-tag מחליטה איך תיראה המחרוזת הסופית: היא יכולה לבצע escape ל-HTML, לבנות SQL בצורה בטוחה, לקמפל CSS או לנתח GraphQL. תפגשו את הדפוס הזה בספריות (styled-components, graphql-tag, lit-html) הרבה יותר מאשר תכתבו אחד בעצמכם. אבל כשתצטרכו עיבוד מחרוזות מותאם אישית, tags הם הכלי הנקי ביותר למשימה.

מלכודות נפוצות

רשימה קצרה של דברים שמכשילים אנשים:

• שוכחים לשמור את התוצאה של מתודה. s.trim() לבדו לא עושה כלום.
• משתמשים ב-+ כדי לשרשר מספר ומחרוזת. "Age: " + 30 + 5 הוא "Age: 305", לא "Age: 35". Template literals עוקפים את הבעיה: `Age: ${30 + 5}`.
• מבלבלים בין == להשוואת מחרוזות. נעסוק בשוויון כמו שצריך בהמשך, אבל "1" == 1 הוא true ו-"1" === 1 הוא false. העדיפו ===.
• מניחים ש-length שווה למספר התווים. באימוג'י ובתווים אחרים שבנויים מזוג surrogate, "".length הוא 2, לא 1. השתמשו ב-[..."".length] או ב-Array.from(s).length כשאתם צריכים את התווים כפי שהמשתמש רואה אותם.

הבא בתור: Numbers ו-BigInt

מחרוזות הן טיפוס פרימיטיבי אחד; מספרים הם טיפוס אחר, ולמערכת המספרים של JavaScript יש מוזרויות משלה: טיפוס Number יחיד גם למספרים שלמים וגם לשברים, ובנוסף BigInt למקרים שבהם זה לא מספיק. זה העמוד הבא.