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

ידע מוקדם: הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.
מטרה: הכרות עם הבסיס של מחרוזות וטקסט ב-JavaScript.

כוחן של מילים

מילים הן אחד הדברים החשובים לבני אדם - זוהי הדרך שמרבית מאיתנו מתקשרים אחד עם השני. מאחר ורשת האינטרנט היא בעיקרה מדיה המבוססת על טקסט המאפשרת לבני אדם להחליף ביניהם מידע, זה מאוד שימוש עבורנו לקבל שליטה על הדרך שבה מילים מוצגות ברשת האינטרנט. HTML מעניק לנו את המבנה ואת המשמעות מאחורי הטקסט שלנו, CSS מאפשר לנו לעצב אותו ואילו JavaScript מכילה מספר אפשרויות וכללים לבצע מניפולציות שונות על מחרוזות, ליצור הודעות/התראות שונות, להראות את הטקסט הנכון כשצריך ועוד.

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

Strings — מחרוזות - הבסיס

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

יצירת מחרוזת

  1. על מנת להתחיל, הזן את השורות הבאות בקונסולה:
    let string = 'The revolution will not be televised.';
    string;
    בדיוק כמו שעשינו עם מספרים, אנחנו מכריזים פה על משתנה ומשימים לו ערך של מחרוזת ואז מקבלים את הערך של המשתנה. ההבדל היחיד הוא שכאשר אנחנו כותבים מחרוזת, אנחנו צריכים להשתמש במרכאות כפולות "" או במרכאות בודדות - גרש מכל צד - ''.
  2. אם לא נעשה זאת, או שנחסיר אותן בצד ימין או שמאל, אנחנו נקבל שגיאה. נסו להזין את השורות הבאות:
    let badString = This is a test;
    let badString = 'This is a test;
    let badString = This is a test';
    שורות קוד אלו לא יעבדו מכיוון שכל טקסט שאינו מוקף במלואו במרכאות נחשב כשם של משתנה או שם של מאפיין או מילה שמורה וכד׳. אם הדפדפן לא מוצא את אותה מילה, הוא מחזיר שגיאה. לדוגמא: "missing; before statement". אם הדפדפן יכול לראות מתי מתחילה מחרוזת, אבל לא מתי היא מסתיימת, מכיוון שחסר מרכאות בצד כלשהו, הוא יחזיר שגיאה כגון: "unterminated string literal". אם התוכנית שלנו מעלה שגיאות כאלו, צריך לחזור ולבדוק את כל המחרוזות ולוודא שלא שכחנו מרכאות.
  3. הקוד הבא יעבוד אם הגדרנו לפני את המשתנה string:
    let badString = string;
    badString;
    badString כעת הוגדר לקבל את אותו ערך כמו של string.

מרכאות כפולות או בודדות

  1. ב-JavaScript, אנחנו יכולים לבחור האם להשתמש במרכאות כפולות או במרכאות בודדות לשם עטיפת המחרוזת שלנו. שניהם יעבדו מצויין ובדיוק אותו דבר:
    let sgl = 'Single quotes.';
    let dbl = "Double quotes";
    sgl;
    dbl;
  2. יש מעט מאוד הבדלים ביניהם, וזה תלוי בכם במה להתשמש. אתם צריכים לבחור סוג אחד ואיתו להמשיך. צריך לזכור שלא ניתן להשתמש בשניהם במקביל כך שמצד אחד של מחרוזת יהיו מרכאות כפולות ומצד שני יהיו מרכאות בודדות, שכן זה יחזיר לנו שגיאה:
    let badQuotes = 'What on earth?";
  3. הדפדפן יחשוב שהמחרוזת לא נסגרה מכיוון שכשאנחנו משתמשים בסוג אחד של מרכאות על מנת לעטוף טקסט, אנחנו יכולים להשתמש בסוג השני של המרכאות בתוך הטקסט עצמו. לדוגמא, השורות הקוד הבאות הן תקינות לחלוטין:
    let sglDbl = 'Would you eat a "fish supper"?';
    let dblSgl = "I'm feeling blue.";
    sglDbl;
    dblSgl;
  4. יחד עם זאת, צריך לזכור שאנחנו לא יכולים לכלול בתוך הטקסט את סוג המרכאות שאיתו אנחנו משתמשים על מנת לעטוף את אותו הטקסט. הדוגמא הבאה תציג לנו שגיאה, שכן הדפדפן לא יודע מתי המחרוזת מסתיימת:
    let bigmouth = 'I've got no right to take my place...';
    וזה מה שמוביל אותנו לנושא הבא. תווים לבריחה ממחרוזות.

תווים לבריחה ממחרוזת

על מנת לתקן את הבעיה בקוד הקודם, אנחנו צריכים לברוח מסימן המרכאות אשר עוטף את הטקסט. תווי בריחה שכאלו משמעותם שאנחנו עושים משהו על מנת לוודא שהם ייקראו כטקסט רגיל ולא כחלק מהקוד שלנו. ב-JavaScript, אנחנו עושים את זה באמצעות שימוש בסימן \נסו את זה:

let bigmouth = 'I\'ve got no right to take my place...';
bigmouth;

זה עובד מצוין. אנחנו יכולים גם לברוח מתווים אחרים באותה צורה. לדוגמא: "\,  ויש עוד. ראו Escape notation לפרטים נוספים.

Concatenating strings - שרשור מחרוזות

  1. שרשור נשמעת כמו מילה מורכבת שמשמעותה הפשוטה הוא חיבור ביחד. חיבור מחרוזות יחד ב-JavaScript מתבצע באמצעות האופרטור (+), באותה צורה כשהשתמשנו בו לביצוע חיבור בין מספרים, אבל בהקשר שלנו הוא מבצע משהו אחר. נסו את הקוד הבא בקונסולה:
    let one = 'Hello, ';
    let two = 'how are you?';
    let joined = one + two;
    joined;
    התוצאה של המשתנה שנקרא joined תכיל את הערך של "Hello, how are you?"
  2. במשתנה השלישי, פשוט חיברנו שתי מחרוזות יחד, אך אנחנו יכולים לחבר כמה מחרוזות שנרצה, כל עוד אנחנו כוללים את סימן + בין כל אחת מהמחרוזות. נסו לדוגמא:
    let multiple = one + one + one + one + two;
    multiple;
  3. אתם גם יכולים לערבב בין משתנים לבין מחרוזות בפועל. נסו את הבא:
    let response = one + 'I am fine — ' + two;
    response;

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

Concatenation in context - שרשור בתוכן

בוא נסתכל על שרשור בפועל - הנה דוגמא ממאמרים קודמים בקורס:

<button>Press me</button>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

כאן אנחנו משתמשים ב- window.prompt() פונקציה בשורה 4, אשר מבקשת מהמשתמש לענות לשאלה באמצעות חלון קופץ, ולאחר מכן מאחסנת את הטקסט שהמשתמש הכניס לתוך משתנה נתון - במקרה הזה - המשתנה name.

לאחר מכן אנחנו משתמשים ב-window.alert() בשורה 5, על מנת להציג למשתמש חלון קופץ נוסף המיכל מחרוזת שהרכבנו משתי מחרוזות בנויות ומהמשתנה name, באמצעות שרשור של המחרוזות.

מספרים vs. מחרוזות

  1. מה יקרה כאשר אנחנו ננסה לחבר (לשרשר) בין מחרוזת לבין מספר? נזין את הקוד הבא בקונסולה:
    'Front ' + 242;
    
    היינו מצפים שניסיון כזה יחזיר לנו שגיאה, אך זה עובד בצורה מצויינת. נסיון להציג מחרוזת כמספר לא עושה הגיון, אבל הצגת מספר כמחרוזת כן, ולכן הדפדפן ממיר את המספר למחרוזת ומאחד בין שתי המחרוזות.
  2. ניתן אפילו לעשות זאת עם שני מספרים - אנחנו יכולים להכריח מספר להפוך למחרוזת על ידי עטיפה שלו במרכאות. נסו את הקוד הבא. שימו לב שאנחנו משתמשים באופרטור typeof על מנת לבדוק האם הערך של המשתנה הוא מספר או מחרוזת:
    let myDate = '19' + '67';
    typeof myDate;
  3. אם יש לנו משתנה שיש לו ערך של מספר ואנחנו רוצים להמירו למחרוזת ללא ביצוע שינוי נוסף בו, או יש לנו משתנה שיש לו ערך שהוא מחרוזת ואנחנו רוצים להמירו למספר ולא לעשות בו שינוי נוסף, אנחנו יכולים להשתמש במתודות הבאות:
    • האובייקט Number יהפוך כל דבר שמועבר אליו למספר, אם הוא יכול. נסו את הקוד הבא:
      let myString = '123';
      let myNum = Number(myString);
      typeof myNum;
    • מצד שני, לכל מספר יש מתודה שנקראת ()toString שתמיר כל מספר למחרוזת תואמת. נסו לדוגמא את הקוד הבא:
      let myNum = 123;
      let myString = myNum.toString();
      typeof myString;
    אלו יכולים להיות מאוד שימושיים בסיטואציות שונות. לדומא, אם משתמש מכניס מספר לתוך שדה טקסט בטופס, זה תמיד יהיה מחרוזת, גם אם הוא הזין מספרים. לעומת זאת, אם אנחנו רוצים להוסיף את המספר שהמשתמש הזין למשהו, זה חייב להיות מספר, ולכן אנחנו נצטרך להעביר את הקלט הזה דרך ()Number. עשינו זאת בדיוק, בדוגמא שלנו ב-משחק ״נחש את הזיכרון״, בשורה 54.

לסיכום

זה היה הבסיס של מחרוזת ב-JavaScript. במאמר הבא אנחנו נסתכל על מתודות מובנות הזמינות למחרוזות בשפה זו ונלמד כיצד אנחנו יכולים להשתמש בהם על מנת לבצע מניפולציות למחרוזות שלנו או לשנות את המבנה שלהן.

במודול זה

Document Tags and Contributors

Contributors to this page: ItzikDabush
Last updated by: ItzikDabush,