path: root/files/he/learn/javascript/first_steps/useful_string_methods/index.html

---
title: מתודות שימושיות של מחרוזות
slug: Learn/JavaScript/First_steps/Useful_string_methods
tags:
  - JavaScript
  - אובייקט
  - חילוץ וחיבור מחרוזות
  - מחרוזות
  - מחרוזות ב-JavaScript
  - מציאת האורך של מחרוזת
  - מציאת חלק ממחרוזת
translation_of: Learn/JavaScript/First_steps/Useful_string_methods
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">לאחר שלמדנו את הבסיס של מחרוזות, נתקדם הלאה ונלמד אילו פעולות אנחנו יכולים לבצע על מחרוזות תוך שימוש במתודות מובנות, כגון מציאת אורך המחרוזת, חיבור ופיצול של מחרוזות, הפרדת תו בודד במחרוזת ועוד.</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>
    <p>הבנה כי מחרוזות הן בעצם סוג של אובייקט, ולמידה כיצד להשתמש במתודות בסיסיות הזמינות עבור אובייקט מסוג שכזה וכיצד לבצע מניפלוציות במחרוזות.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="מחרוזות_הן_בעצם_סוג_של_אובייקט">מחרוזות הן בעצם סוג של אובייקט</h2>

<p id="Useful_string_methods">רוב הדברים ב-JavaScript הן בעצם אובייקט. כאשר אנחנו יוצרים מחרוזת כזו לדוגמא:</p>

<pre class="brush: js">let string = 'This is my string';</pre>

<p>המשתנה שלנו בעצם הופך למעין מופע של אובייקט מחרוזת (a string object instance), וכתוצאה מכך לא מעט מתודות ומאפיינים הופכים לזמינים עבור המשתנה. </p>

<p>ניתן לראות את רשימת המתודות ומאפיינים אלו בדף בנושא  {{jsxref("String")}} - ראו את הכמות הלא מבוטלת הזו של מתודות ומאפיינים. </p>

<p><strong>לפני שאתם נלחצים - אנחנו לא באמת צריכים לזכור את כל המתודות והמאפיינים הללו, לפחות לא בתחילת דרכנו. </strong>אך יש כאלו שנרצה לזכור ולתרגל שכן אנחנו נשתמש בהן לעיתים תכופות. </p>

<p>נתחיל בתרגול על ידי הכנסת הדוגמאות הבאות ל<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>:</p>

<h3 id="מציאת_האורך_של_מחרוזת">מציאת האורך של מחרוזת</h3>

<p>זהו מאפיין המאפשר לנו למצוא את האורך של המחרוזת - אנחנו פשוט משתמשים במאפיין {{jsxref("String.prototype.length", "length")}}. נסו להכניס את הקוד הבא בקונסולה:</p>

<pre class="brush: js">let browserType = 'mozilla';
browserType.length;</pre>

<p>זה אמור להחזיר לכם את המספר 7, מכיוון שהמחרוזת ״mozilla״ מורכבת מ-7 תווים. זה מאוד שימושי מסיבות רבות: לדוגמא, לפעמים נרצה למצוא את האורך של כל שם ברשימה של שמות ואז להציג אותם לפי האורך שלהם, או לתת למשתמש הודעה ששם המשתמש שהוא הכניס הוא ארוך מדי אם הוא עבר אורך מסויים.</p>

<h3 id="אחזור_של_תו_ספציפי_במחרוזת">אחזור של תו ספציפי במחרוזת</h3>

<p>בהקשר זה, אנחנו יכולים לקבל תו ספציפי במחרוזת, על ידי שימוש ב - <strong>סוגריים מרובעות</strong> בסוף המחרוזת שלנו - כלומר, אנחנו צריכים לכלול (<code>[]</code>) בסוף שם המשתנה שלנו.</p>

<p>בתוך הסוגריים המרובעות אנחנו צריכים להכניס את מס׳ התו שאנחנו רוצים לקבל בחזרה, כך שאם נרצה את התו הראשון במחרוזת, נזין את הקוד הבא:</p>

<pre class="brush: js">browserType[0];</pre>

<p>שימו לב שמחשבים מתחילים לספור מ-0 ולא מ-1. על מנת לקבל את התו האחרון של <em>כל</em> מחרוזת, אנחנו יכולים להשתמש בקוד הבא המבצע שימוש גם במאפיין <code>length</code> שלמדנו למעלה.</p>

<pre class="brush: js">browserType[browserType.length-1];</pre>

<p>האורך של "mozilla" הוא 7 תווים, אך מכיוון שהמונה (או יותר נכון - אינדקס) מתחיל לספור מ-0, אז המיקום של התו 6 בעצם הוא המיקום של התו האחרון במחרוזת, ולכן אנחנו צריכים את הקוד <code>length-1</code>. אנחנו יכולים להשתמש בזה לדוגמא על מנת למצוא את האות הראשון בסדרה של מחרוזות ולסדר המחרוזות לפי סדר האלפבית.</p>

<h3 id="מציאת_חלק_ממחרוזת_וחילוצו">מציאת חלק ממחרוזת וחילוצו</h3>

<ol>
 <li>לפעמים נרצה לבדוק האם מחרוזת מסויימת בת מספר תווים נמצאת בתוך מחרוזת גדולה יותר. (באופן כללי אנחנו בודקים <em>האם מחרוזת המשנה קיימת בתוך המחרוזת</em>). ניתן לבצע זאת באמצעות מתודת {{jsxref("String.prototype.indexOf()", "indexOf()")}} אשר מקבלת {{glossary("parameter")}} אחד — את מחרוזת המשנה שאנחנו נרצה לחפש בתוך המחרוזת הגדולה יותר. נסו להזין את הקוד הבא:

  <pre class="brush: js">browserType.indexOf('zilla');</pre>
  קיבלנו בחזרה את הערך 2 שמציין שמחרוזת-המשנה "zilla" מתחילה במיקום 2 בתוך המחרוזת "mozilla". קוד שכזה יכול לעזור לנו לסנן מחרוזות. לדוגמא, אם יש לנו רשימה של כתובות אינטרנט, ונרצה לסנן רק את אלו המכילים את המחרוזת "zilla".</li>
</ol>

<ol start="2">
 <li>שימו לב שניתן לבצע סינון זאת גם על דרך השלילה אשר תהיה כמובן יעילה יותר. נסו את הקוד הבא:
  <pre class="brush: js">browserType.indexOf('vanilla');</pre>
  קוד זה יחזיר  לנו את התוצאה <code>1-</code> אשר משמעותה היא כי מחרוזת המשנה שהזנו למתודה לא קיימת במחרוזת הראשית. כאן לדוגמא, המחרוזת 'vanilla' לא נמצאה במחרוזת הראשית.<br>
  <br>
  אנו יכולים לעשות בזה שימוש למצוא את כל המופעים של מחרוזות <strong>שכן</strong> מכילים את מחרוזת המשנה 'mozilla' או <strong>שאינם מכילים,</strong> אם אנחנו משתמשים באופרטור שלילה כפי שמצויין למטה.

  <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) {
  // do stuff with the string
}</pre>
 </li>
 <li>כשאנחנו יודעים היכן מחרוזת המשנה שלנו מתחילה בתוך מחרוזת ראשית, ואנחנו יודעים באיזה תו אנחנו רוצים שמחרוזת המשנה תסתיים, אנחנו יכולים להשתמש ב - {{jsxref("String.prototype.slice()", "slice()")}} נסו להזין את הקוד הבא:
  <pre class="brush: js">browserType.slice(0,3);</pre>
  קוד זה יחזיר לנו כתוצאה "moz" - הארגומנט הראשון שהזנו - 0 - הוא המיקום של התו הראשון במחרוזת המשנה שנרצה לחלץ, והארגומנט השני שהזנו - 3 - יהיה התו שאחרי התו האחרון במחרוזת שנרצה לחלץ. זאת אומרת, החיתוך של המחרוזת מתרחש החל מהתו הראשון ועד, אך לא כולל, התו הרביעי. להזכירכם - מחשבים מתחילים לספור מ-0 ולא מ-1.<br>
   </li>
 <li>בנוסף, אם נרצה לחלץ את כל התווים אחרי תו מסויים, אנחנו יכולים להשמיט את הארגומנט השני. כלומר אנחנו ניתן למתודה רק את מיקום התו שאיתו נתחיל את החילוץ. ראו את הקוד הבא:
  <pre class="brush: js">browserType.slice(2);</pre>
  קוד זה מחזיר את הערך "zilla" - מכיוון שהאות שבמיקום 2 היא האות z ומכיוון שהשמטנו את הארגומנט השני, המתודה חילצה את כל התווים עד סוף המחרוזת <code>browserType</code>.</li>
</ol>

<div class="note">
<p><strong>להזכירכם</strong>: הפרמטר השני של <code>()slice</code> הוא אופציונלי: אם נשמיט אותו, החיתוך יסתיים בסוף המחרוזת המקורית. יש גם אופציות נוספות. ראו בדף בנושא {{jsxref("String.prototype.slice()", "slice()")}} ללמוד על הנושא יותר.</p>
</div>

<div class="note">
<p><strong>להזכירכם</strong>: מתודות ומאפיינים אלו לא שומרות את התוצאה של המניפולציה או החישוב שהן ביצעו. על מנת לשמור את התוצאה, אנחנו צריכים לשמור אותה במשתנה חדש. כמו כן, שימו לב שמתודות ומאפיינים אלו לא שינו את מחרוזת המקור שעליה ביצענו את החישובים/מניפולציות השונות.</p>
</div>

<h3 id="שינוי_אות_גדולה_לאות_קטנה_וההיפך">שינוי אות גדולה לאות קטנה, וההיפך</h3>

<p>המתודות של מחרוזת {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} ו- {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} מאפשרות להמיר מחרוזת <strong>בשלמותה</strong> לאותיות גדולות או לאותיות קטנות, בהתאמה. זה יכול להיות מאוד שימוש כשנרצה לנרמל את כל הערכים שהמשתמש מכניס לפני שנעביר לשרת. להזכירכם - JavaScript היא case sensitive.</p>

<p>נסו להכניס את הקוד הבא וראו מה התוצאה:</p>

<pre class="brush: js">let radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();</pre>

<p>נסו לבדוק מה הערך של המשתנה <code>radData</code> והאם מתודות אלו שמרו בו את התוצאה של הפעלתן.</p>

<h3 id="עדכון_חלקים_של_מחרוזת">עדכון חלקים של מחרוזת</h3>

<p>אנחנו יכולים להחליף מחרוזת אחת במחרוזת אחרת באמצעות המתודה {{jsxref("String.prototype.replace()", "replace()")}}. מתודה זו עובדת בצורה פשוטה וברורה, למרות שניתן לבצע איתה דברים מורכבים יותר, אך לא ניכנס אליהם במדריך זה.</p>

<p>מתודה זו מקבלת 2 ארגומנטים/פרמטרים - הראשון הוא המחרוזת שאנחנו רוצים להחליף והשני הוא המחרוזת שתיכנס במקום. נסו את הדוגמא הבאה:</p>

<pre class="brush: js">browserType.replace('moz','van');</pre>

<p>שימו לב שגם הפעם הערך שמוחזר לנו הוא המחרוזת החדשה שבוצעה בה ההחלפה, אך הערך הזה לא נשמר במחרוזת שעליה עשינו את ההחלפה. על מנת לקבל את המחרוזת החדשה במשתנה שלנו <code>browserType</code> אנחנו נצטרך לקבוע שהערך שלו יהיה התוצאה של ההפעלה של מתודה זו. כלומר - <code>browserType = browserType.replace('moz','van');</code></p>

<h2 id="דוגמאות_ללמידה_עצמאית">דוגמאות ללמידה עצמאית</h2>

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

<p>כל דוגמא מגיע עם כפתור "Reset" על מנת לאתחל את הקוד במידה והוא השתבש וכן כפתור "Show solution" על מנת להציג את פתרון אפשרי במקרה ונתקעתם.</p>

<h3 id="סינון_של_הודעות">סינון של הודעות</h3>

<p>בתרגיל זה אנחנו מתחיל בתרגיל פשוט - יש לנו מערך של הודעה ברכה, אבל אנחנו רוצים למיין ולסנן רק את אלו שמכילות הודעה ברכה בהקשר של כריסמס. אנחנו רוצים שתכתוב משפט תנאי בתוך הקוד <code>( ... )if</code> אשר יבדוק כל מחרוזת וידפיס אותה לרשימה רק אם היא מכילה ברכה של כריסמס.</p>

<ol>
 <li>חשבו תחילה איך אנחנו יכולים לבדוק האם ההודעה בכל פעם היא הודעה הקשורה לכריסמס. איזה מחרוזת מוצגת בכל ההודעות האלו ואיזו מתודה יכולה לבדוק האם המחרוזת נמצאת בתוך ההודעה הזו (אשר גם היא מחרוזת).</li>
 <li>אנחנו נלמד לכתוב משפט תנאי בתצורת <em>operand1 operator operand2</em>. האם הערך הנמצא מצד שמאל שווה לערך הנמצא מצד ימין? האם תוצאת הפעלת המתודה מצד שמאל, תהא שווה לערך בצד ימין לצד ימין? רמז - במקרה הנוכחי יהיה עדיף לבדוק האם תוצאת הפעלת המתודה בצד שמאל שונה מהערך בצד ימין.</li>
</ol>

<div class="hidden">
<h6 id="קוד_לתרגול">קוד לתרגול</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;

&lt;div class="output" style="min-height: 125px;"&gt;

&lt;ul&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="height: 290px; width: 95%"&gt;
const list = document.querySelector('.output ul');
list.innerHTML = '';
let greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];

for (let i = 0; i &lt; greetings.length; i++) {
  let input = greetings[i];
  // Your conditional test needs to go inside the parentheses - הכניסו את הקוד שלכם כאן - בין הסוגריים המסולסלות של הלולאה
  // in the line below, replacing what's currently there - בשורה מתחת - החליפו את מה שנמצא שם כרגע
  if (greetings[i]) {
    let listItem = document.createElement('li');
    listItem.textContent = input;
    list.appendChild(listItem);
  }
}
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var jsSolution = 'const list = document.querySelector(\'.output ul\');' +
'\nlist.innerHTML = \'\';' +
'\nlet greetings = [\'Happy Birthday!\',' +
'\n                 \'Merry Christmas my love\',' +
'\n                 \'A happy Christmas to all the family\',' +
'\n                 \'You\\\'re all I want for Christmas\',' +
'\n                 \'Get well soon\'];' +
'\n' +
'\nfor (let i = 0; i &lt; greetings.length; i++) {' +
'\n  let input = greetings[i];' +
'\n  if (greetings[i].indexOf(\'Christmas\') !== -1) {' +
'\n    let result = input;' +
'\n    let listItem = document.createElement(\'li\');' +
'\n    listItem.textContent = result;' +
'\n    list.appendChild(listItem);' +
'\n  }' +
'\n}';

var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="שינוי_אותיות_גדולות_וקטנות">שינוי אותיות גדולות וקטנות</h3>

<p>בתרגיל זה יש לנו שמות של ערים בבריטניה, אך יש ערבוב של אותיות גדולות וקטנות בשמות הערים. אנחנו רוצים שתשנו את המחרוזות כך שכולן יהיו עם אותיות קטנות, למעט האות הראשונה שתהיה אות גדולה. דרך מומלצת לעשות זאת:</p>

<ol>
 <li>החליפו את כל המחרוזת שנמצאת משתנה <code>input</code> למחרוזת עם אותיות קטנות ואחסנו את התוצאה במשתנה חדש.</li>
 <li>נסו לקבל את האות הראשונה של המחרוזת המאוחסנת במשתנה החדש שיצרתם ואחסנו את האות הראשונה במשתנה חדש נוסף.</li>
 <li>השתמשו במשתנה זה כמשתנה המכיל את מחרוזת המשנה והחליפו את האות הראשונה לאות גדולה. אחסנו את התוצאה של ההחלפה במשתנה חדש.</li>
 <li>שנו את הערך של המשתנה <code>result</code> כך שייה שווה לתוצאה הסופית ולא <code>input</code>.</li>
</ol>

<div class="note">
<p><strong>רמז</strong>: הפרמטרים של מתודות של מחרוזות לא חייבים להיות מחרוזות מפורשות אלא הם יכולים להיות גם משתנים וגם משתנים שמופעלים עליהן מתודות נוספות.</p>
</div>

<div class="hidden">
<h6 id="Playable_code_2">Playable code 2</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;

&lt;div class="output" style="min-height: 125px;"&gt;

&lt;ul&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="height: 250px; width: 95%"&gt;
const list = document.querySelector('.output ul');
list.innerHTML = '';
let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];

for (let i = 0; i &lt; cities.length; i++) {
  let input = cities[i];
  // write your code just below here

  let result = input;
  let listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var jsSolution = 'const list = document.querySelector(\'.output ul\');' +
'\nlist.innerHTML = \'\';' +
'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' +
'\n' +
'\nfor (let i = 0; i &lt; cities.length; i++) {' +
'\n  let input = cities[i];' +
'\n  let lower = input.toLowerCase();' +
'\n  let firstLetter = lower.slice(0,1);' +
'\n  let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' +
'\n  let result = capitalized;' +
'\n  let listItem = document.createElement(\'li\');' +
'\n  listItem.textContent = result;' +
'\n  list.appendChild(listItem);' +
'\n' +
'\n}';

var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="חילוץ_וחיבור_מחרוזות">חילוץ וחיבור מחרוזות</h3>

<p>בתרגיל זה, יש לנו מערך שכולל מס׳ מחרוזות המכילות מידע על תחנות רכבת באנגליה. המחרוזות הן פריטי מידע המכילים 3 אותיות עם קוד התחנה, לאחר מכן מידע ממוחשב כלשהו ולאחריו הסימן <code>;</code> ולאחר מכן שם התחנה. לדוגמא:</p>

<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre>

<p>אנו רוצים שתחלצו את קוד התחנה ואת שם התחנה, ותאחסנו אותה במחרוזת חדשה במבנה הבא:</p>

<pre>MAN: Manchester Piccadilly</pre>

<p>אנו ממליצים לכם לבצע זאת בצורה הבאה:</p>

<ol>
 <li>חלצו את שלושת האותיות שהן קוד התחנה ואחסנו אותן במשתנה חדש.</li>
 <li>מצאו את האינדקס (מיקום) של התו <code>;</code>.</li>
 <li>חלצו את שם התחנה באמצעות האינדקס של תו <code>;</code> כנקודת התחלה ואחסנו את התוצאה במשתנה חדש.</li>
 <li>אחדו בין שני המשתנים ביחד עם מחרוזת רגילה למחרוזת אחת שלמה.</li>
 <li>שנו את הערך של משתנה  <code>result</code> שיהיה שווה לערך של המחרוזת החדשה ולא של <code>input</code>.</li>
</ol>

<div class="hidden">
<h6 id="קוד_נוסף_לתרגול">קוד נוסף לתרגול</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;

&lt;div class="output" style="min-height: 125px;"&gt;

&lt;ul&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="height: 285px; width: 95%"&gt;
const list = document.querySelector('.output ul');
list.innerHTML = '';
let stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                'GNF576746573fhdg4737dh4;Greenfield',
                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                'SYB4f65hf75f736463;Stalybridge',
                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

for (let i = 0; i &lt; stations.length; i++) {
  let input = stations[i];
  // write your code just below here

  let result = input;
  let listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var jsSolution = 'const list = document.querySelector(\'.output ul\');' +
'\nlist.innerHTML = \'\';' +
'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' +
'\n                \'GNF576746573fhdg4737dh4;Greenfield\',' +
'\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' +
'\n                \'SYB4f65hf75f736463;Stalybridge\',' +
'\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' +
'\n' +
'\nfor (let i = 0; i &lt; stations.length; i++) {' +
'\n  let input = stations[i];' +
'\n  let code = input.slice(0,3);' +
'\n  let semiC = input.indexOf(\';\');' +
'\n  let name = input.slice(semiC + 1);' +
'\n  let result = code + \': \' + name;' +
'\n  let listItem = document.createElement(\'li\');' +
'\n  listItem.textContent = result;' +
'\n  list.appendChild(listItem);' +
'\n}';

var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="לסיכום">לסיכום</h2>

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

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "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>