אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » ES20XX » ES2017 – padding

ES2017 – padding

רן בר-זיק מרץ 19, 2017 7:07 am תגובה אחת

פיצ'ר קטן של ES2017 שמאחוריו יש סיפור שלם של יצרים ובושה גדולה לעולם הג'אווהסקריפט

»ES2017 – פסיקים בסוף
»ES017 – איטרציה של אובייקטים ו-getOwnPropertyDescriptors
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

בגדול מדובר בתוספת ל-String prototype- מתודה שמשתמשים בה ומוסיפה טקסט מצד שמאל של הטקסט. למשל, אם יש לי מחרוזת טקסט שהיא 'x' אבל אני רוצה שהיא תהיה x____ (כלומר מחרוזת באורך של חמישה תווים שיש לפניה ארבעה תווים של _) אני אכתוב משהו כזה:


let myString = 'x'
let padMyString = myString.padStart(5, '_')

console.log(padMyString); //____x

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


let myString = 'x'
let padMyString = myString.padStart(5, 'abc')

console.log(padMyString); // abcax

כאן הארגומנט הראשון הוא 5- כלומר המחרוזת הסופית תהיה באורך חמישה תווים. המחרוזת טקסט שאנחנו רוצים שתיכנס לפני היא 'abc'. מחרוזת הטקסט הזו תחזור על עצמה שוב עד שהמחרוזת הסופית תגיע לחמישה. כך בעצם יש abc (הגענו לאורך של 3 תוים) ואז עוד a שהוא חלק מה-abc (הגענו ל-4 תוים) ואז המחרוזת המקורית x שאורכה תו אחד. ביחד חמישה תוים.

הארגומנט השני הוא אופציונלי. אם לא נכניס לתוכו דבר הוא ישים לנו רווח. הנה הדוגמה:


let myString = 'x'
let padMyString = myString.padStart(5)

console.log(padMyString); //    x

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


let myString = 'x'
let padMyString = myString.padEnd(5, 'abc')

console.log(padMyString); // xabca

אפשר לשחק עם זה ב-codepen הזה שהכנתי:

See the Pen PadStart and PadEnd by Ran Bar-Zik (@barzik) on CodePen.

כיוון שמדובר במתודה חדשה ל-string object אז אם אנחנו רוצים להשתמש בה, פלאגין של babel לא יעזור אלא נצטרך להשתמש בפוליפילים של babel.

ועכשיו לסיפור העסיסי

אם תחטטו במסמכים של ה-TC39 ובדיונים גבוהי המצח סביב הפיצ'ר הזה שניהלו מהנדסים וחוקרים מכובדים, לא תמצאו את הסיבה האמיתית והמביכה לפיצ'ר הזה. הסיפור מתחיל בשנת 2016 כאשר חברת אינטרנט דה לה שמאטע בשם קיק פנתה למפתח node בשם אזר קוסולו (Azer Koçulu) ודרשה ממנו להסיר את אחד המודולים שהוא פיתח והופיעו ב-npm – מאגר המודולים של node רק בגלל שגם הוא נשא את השם קיק. המודול היה יותר ותיק מהחברה ואזר, בצדק רב לפי דעתי, שלח את חברת קיק לכל הרוחות. עורכי הדין הנמרצים של חברת קיק פנו אל npm בדרישה להסרת המודול. npm, באופן עלוב למדי, צייתו לדרישה של עורכי הדין מניה וביה במקום לזרוק אותם מכל המדרגות. אזר הזועם החליט וגם נימק את ההחלטה שלו בפוסט יפה, להוריד את כל המודולים שלו מ-npm.
אחד המודולים של אזר היה leftpad. מודול פשוט מאוד שעושה בדיוק את מה ש-padStart עושה ב-11 שורות קוד בערך. הבעיה היא שכמעט כל מודול של npm השתמש בו (או השתמש במודולים שהשתמשו בו) כי זה מאוד שימושי ונוח להציג מידע בקונסולה. הסרת המודול הזה מ-npm גרמה לכל המודולים בעולם בערך לא לעבוד.
ואז החלה סופת הקקה האמיתית – מאות אלפי בילדים (כלומר התקנות) של מוצרים בעולם התחילו להשבר אחד אחרי השני. גם המוצר שעבדכם הנאמן עבד עליו באותו הזמן. אחד מהמוצרים שהפסיק לתפקד, באופן פרדוקסלי משהו, היה המוצר של קיק. המנהלים של npm היו צריכים למצוא פתרון ולהחזיר את המודול הסורר. בושות גדולות מאוד לעולם הג'אווהסקריפט וזעם של מתכנתים על חברת קיק שהספיקה מאז להתנצל ולירות בעורך הדין האידיוט שעורר את כל הבלגן (יש מצב שהמצאתי את הקטע שירו בעורך הדין). באופן 'מפתיע', אחד הדברים הראשונים שנכנסו לתקן 2017 זה היכולת לעשות padding משמאל (או מימין) באופן אינהרנטי בשפה.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
es2017

תגובה אחת

  1. ראובן הגב מרץ 24, 2017 בשעה 6:48 pm

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

    הכוונה היא להיפך, נכון?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד