1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: "התמודדות עם טקסט\_— מחרוזות (Strings) ב-JavaScript"
slug: Learn/JavaScript/First_steps/Strings
translation_of: Learn/JavaScript/First_steps/Strings
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
<p class="summary">כעת, אנו נשים את הפוקוס על מחרוזות - כך נקראים חלקים של טקסט בתכנות. במאמר זה אנחנו נסתכל על הדברים המשותפים שאנחנו חייבים לדעת על מחרוזות כשלומדים JavaScript, כמו יצירת מחרוזות, חיבור מחרוזות וכד׳.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">ידע מוקדם:</th>
<td>הבנה בסיסית של מחשב, הבנה בסיסית של HTML, CSS ו - JavaScript.</td>
</tr>
<tr>
<th scope="row">מטרה:</th>
<td>הכרות עם הבסיס של מחרוזות וטקסט ב-JavaScript.</td>
</tr>
</tbody>
</table>
<h2 id="כוחן_של_מילים">כוחן של מילים</h2>
<p>מילים הן אחד הדברים החשובים לבני אדם - זוהי הדרך שמרבית מאיתנו מתקשרים אחד עם השני. מאחר ורשת האינטרנט היא בעיקרה מדיה המבוססת על טקסט המאפשרת לבני אדם להחליף ביניהם מידע, זה מאוד שימוש עבורנו לקבל שליטה על הדרך שבה מילים מוצגות ברשת האינטרנט. {{glossary("HTML")}} מעניק לנו את המבנה ואת המשמעות מאחורי הטקסט שלנו, {{glossary("CSS")}} מאפשר לנו לעצב אותו ואילו JavaScript מכילה מספר אפשרויות וכללים לבצע מניפולציות שונות על מחרוזות, ליצור הודעות/התראות שונות, להראות את הטקסט הנכון כשצריך ועוד.</p>
<p>כמעט כל התוכניות שעברנו עליהם בקורס עד כה כללו מניפולציה כלשהי על מחרוזות.</p>
<h2 id="Strings_—_מחרוזות_-_הבסיס">Strings — מחרוזות - הבסיס</h2>
<p>אנו נעבוד עם מחרוזות בדיוק כמו שעבדנו עם מספרים, אך עם מספר הבדלים: נתחיל בכך שנפתח את הקונסולה ונזין מספר שורות קוד:</p>
<h3 id="יצירת_מחרוזת">יצירת מחרוזת</h3>
<ol>
<li>על מנת להתחיל, הזן את השורות הבאות בקונסולה:
<pre class="brush: js">let string = 'The revolution will not be televised.';
string;</pre>
בדיוק כמו שעשינו עם מספרים, אנחנו מכריזים פה על משתנה ומשימים לו ערך של מחרוזת ואז מקבלים את הערך של המשתנה. ההבדל היחיד הוא שכאשר אנחנו כותבים מחרוזת, אנחנו צריכים להשתמש במרכאות כפולות <code>""</code> או במרכאות בודדות - גרש מכל צד - <code>''</code>.</li>
<li>אם לא נעשה זאת, או שנחסיר אותן בצד ימין או שמאל, אנחנו נקבל שגיאה. נסו להזין את השורות הבאות:
<pre class="brush: js example-bad">let badString = This is a test;
let badString = 'This is a test;
let badString = This is a test';</pre>
שורות קוד אלו לא יעבדו מכיוון שכל טקסט שאינו מוקף במלואו במרכאות נחשב כשם של משתנה או שם של מאפיין או מילה שמורה וכד׳. אם הדפדפן לא מוצא את אותה מילה, הוא מחזיר שגיאה. לדוגמא: "missing; before statement". אם הדפדפן יכול לראות מתי מתחילה מחרוזת, אבל לא מתי היא מסתיימת, מכיוון שחסר מרכאות בצד כלשהו, הוא יחזיר שגיאה כגון: "unterminated string literal". אם התוכנית שלנו מעלה שגיאות כאלו, צריך לחזור ולבדוק את כל המחרוזות ולוודא שלא שכחנו מרכאות.</li>
<li>הקוד הבא יעבוד אם הגדרנו לפני את המשתנה <code>string</code>:
<pre class="brush: js">let badString = string;
badString;</pre>
<code>badString</code> כעת הוגדר לקבל את אותו ערך כמו של <code>string</code>.</li>
</ol>
<h3 id="מרכאות_כפולות_או_בודדות">מרכאות כפולות או בודדות</h3>
<ol>
<li>ב-JavaScript, אנחנו יכולים לבחור האם להשתמש במרכאות כפולות או במרכאות בודדות לשם עטיפת המחרוזת שלנו. שניהם יעבדו מצויין ובדיוק אותו דבר:
<pre class="brush: js">let sgl = 'Single quotes.';
let dbl = "Double quotes";
sgl;
dbl;</pre>
</li>
<li>יש מעט מאוד הבדלים ביניהם, וזה תלוי בכם במה להתשמש. אתם צריכים לבחור סוג אחד ואיתו להמשיך. צריך לזכור שלא ניתן להשתמש בשניהם במקביל כך שמצד אחד של מחרוזת יהיו מרכאות כפולות ומצד שני יהיו מרכאות בודדות, שכן זה יחזיר לנו שגיאה:
<pre class="brush: js example-bad">let badQuotes = 'What on earth?";</pre>
</li>
<li>הדפדפן יחשוב שהמחרוזת לא נסגרה מכיוון שכשאנחנו משתמשים בסוג אחד של מרכאות על מנת לעטוף טקסט, אנחנו יכולים להשתמש בסוג השני של המרכאות בתוך הטקסט עצמו. לדוגמא, השורות הקוד הבאות הן תקינות לחלוטין:
<pre class="brush: js">let sglDbl = 'Would you eat a "fish supper"?';
let dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;</pre>
</li>
<li>יחד עם זאת, צריך לזכור שאנחנו לא יכולים לכלול בתוך הטקסט את סוג המרכאות שאיתו אנחנו משתמשים על מנת לעטוף את אותו הטקסט. הדוגמא הבאה תציג לנו שגיאה, שכן הדפדפן לא יודע מתי המחרוזת מסתיימת:
<pre class="brush: js example-bad">let bigmouth = 'I've got no right to take my place...';</pre>
וזה מה שמוביל אותנו לנושא הבא. תווים לבריחה ממחרוזות.</li>
</ol>
<h3 id="תווים_לבריחה_ממחרוזת">תווים לבריחה ממחרוזת</h3>
<p>על מנת לתקן את הבעיה בקוד הקודם, אנחנו צריכים לברוח מסימן המרכאות אשר עוטף את הטקסט. תווי בריחה שכאלו משמעותם שאנחנו עושים משהו על מנת לוודא שהם ייקראו כטקסט רגיל ולא כחלק מהקוד שלנו. ב-JavaScript, אנחנו עושים את זה באמצעות שימוש בסימן <code>\</code>נסו את זה:</p>
<pre class="brush: js">let bigmouth = 'I\'ve got no right to take my place...';
bigmouth;</pre>
<p>זה עובד מצוין. אנחנו יכולים גם לברוח מתווים אחרים באותה צורה. לדוגמא: <code>"\</code>, ויש עוד. ראו <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Escape notation</a> לפרטים נוספים.</p>
<h2 id="Concatenating_strings_-_שרשור_מחרוזות">Concatenating strings - שרשור מחרוזות</h2>
<ol>
<li>שרשור נשמעת כמו מילה מורכבת שמשמעותה הפשוטה הוא חיבור ביחד. חיבור מחרוזות יחד ב-JavaScript מתבצע באמצעות האופרטור (+), באותה צורה כשהשתמשנו בו לביצוע חיבור בין מספרים, אבל בהקשר שלנו הוא מבצע משהו אחר. נסו את הקוד הבא בקונסולה:
<pre class="brush: js">let one = 'Hello, ';
let two = 'how are you?';
let joined = one + two;
joined;</pre>
התוצאה של המשתנה שנקרא <code>joined</code> תכיל את הערך של "Hello, how are you?"</li>
<li>במשתנה השלישי, פשוט חיברנו שתי מחרוזות יחד, אך אנחנו יכולים לחבר כמה מחרוזות שנרצה, כל עוד אנחנו כוללים את סימן <code>+</code> בין כל אחת מהמחרוזות. נסו לדוגמא:
<pre class="brush: js">let multiple = one + one + one + one + two;
multiple;</pre>
</li>
<li>אתם גם יכולים לערבב בין משתנים לבין מחרוזות בפועל. נסו את הבא:
<pre class="brush: js">let response = one + 'I am fine — ' + two;
response;</pre>
</li>
</ol>
<div class="note">
<p><strong>לתשומת לב</strong>: כשאנחנו מכניסים מחרוזת טקסט ממשית לתוך הקוד שלנו, כשהיא עטופה במרכאות (כפולות או בודדות), זה נקרא <strong>string literal</strong>.</p>
</div>
<h3 id="Concatenation_in_context_-_שרשור_בתוכן">Concatenation in context - שרשור בתוכן</h3>
<p>בוא נסתכל על שרשור בפועל - הנה דוגמא ממאמרים קודמים בקורס:</p>
<pre class="brush: html"><button>Press me</button></pre>
<pre class="brush: js">const button = document.querySelector('button');
button.onclick = function() {
let name = prompt('What is your name?');
alert('Hello ' + name + ', nice to see you!');
}</pre>
<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
<p>כאן אנחנו משתמשים ב- {{domxref("window.prompt()", "window.prompt()")}} פונקציה בשורה 4, אשר מבקשת מהמשתמש לענות לשאלה באמצעות חלון קופץ, ולאחר מכן מאחסנת את הטקסט שהמשתמש הכניס לתוך משתנה נתון - במקרה הזה - המשתנה <code>name</code>.</p>
<p>לאחר מכן אנחנו משתמשים ב-{{domxref("window.alert()", "window.alert()")}} בשורה 5, על מנת להציג למשתמש חלון קופץ נוסף המיכל מחרוזת שהרכבנו משתי מחרוזות בנויות ומהמשתנה <code>name</code>, באמצעות שרשור של המחרוזות.</p>
<h3 id="מספרים_vs._מחרוזות">מספרים vs. מחרוזות</h3>
<ol>
<li>מה יקרה כאשר אנחנו ננסה לחבר (לשרשר) בין מחרוזת לבין מספר? נזין את הקוד הבא בקונסולה:
<pre class="brush: js">'Front ' + 242;
</pre>
היינו מצפים שניסיון כזה יחזיר לנו שגיאה, אך זה עובד בצורה מצויינת. נסיון להציג מחרוזת כמספר לא עושה הגיון, אבל הצגת מספר כמחרוזת כן, ולכן הדפדפן ממיר את המספר למחרוזת ומאחד בין שתי המחרוזות.</li>
<li>ניתן אפילו לעשות זאת עם שני מספרים - אנחנו יכולים להכריח מספר להפוך למחרוזת על ידי עטיפה שלו במרכאות. נסו את הקוד הבא. שימו לב שאנחנו משתמשים באופרטור <code>typeof</code> על מנת לבדוק האם הערך של המשתנה הוא מספר או מחרוזת:
<pre class="brush: js">let myDate = '19' + '67';
typeof myDate;</pre>
</li>
<li>אם יש לנו משתנה שיש לו ערך של מספר ואנחנו רוצים להמירו למחרוזת ללא ביצוע שינוי נוסף בו, או יש לנו משתנה שיש לו ערך שהוא מחרוזת ואנחנו רוצים להמירו למספר ולא לעשות בו שינוי נוסף, אנחנו יכולים להשתמש במתודות הבאות:
<ul>
<li>האובייקט {{jsxref("Number")}} יהפוך כל דבר שמועבר אליו למספר, אם הוא יכול. נסו את הקוד הבא:
<pre class="brush: js">let myString = '123';
let myNum = Number(myString);
typeof myNum;</pre>
</li>
<li>מצד שני, לכל מספר יש מתודה שנקראת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">()toString</a></code> שתמיר כל מספר למחרוזת תואמת. נסו לדוגמא את הקוד הבא:
<pre class="brush: js">let myNum = 123;
let myString = myNum.toString();
typeof myString;</pre>
</li>
</ul>
אלו יכולים להיות מאוד שימושיים בסיטואציות שונות. לדומא, אם משתמש מכניס מספר לתוך שדה טקסט בטופס, זה תמיד יהיה מחרוזת, גם אם הוא הזין מספרים. לעומת זאת, אם אנחנו רוצים להוסיף את המספר שהמשתמש הזין למשהו, זה חייב להיות מספר, ולכן אנחנו נצטרך להעביר את הקלט הזה דרך <code>()Number</code>. עשינו זאת בדיוק, בדוגמא שלנו ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">משחק ״נחש את הזיכרון״, בשורה 54</a>.</li>
</ol>
<h2 id="לסיכום">לסיכום</h2>
<p>זה היה הבסיס של מחרוזת ב-JavaScript. במאמר הבא אנחנו נסתכל על מתודות מובנות הזמינות למחרוזות בשפה זו ונלמד כיצד אנחנו יכולים להשתמש בהם על מנת לבצע מניפולציות למחרוזות שלנו או לשנות את המבנה שלהן.</p>
<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
<h2 id="במודול_זה">במודול זה</h2>
<ul>
<li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב- JavaScript — מספרים ואופרטורים</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
<li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
</ul>
|
