סיפורו של הפיצ'ר הזה, שהוא פשוט למדי מתחיל משערוריה משמעותית בעולם הג'אווהסקריפט. כדי לא להלאות את קוראי שלא מעוניינים בסיפורים העסיסיים שיש מאחורי הפיצ'רים, אני אסביר עליו קודם ואז אספר למה הוא נוצר.
בגדול מדובר בתוספת ל-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 משמאל (או מימין) באופן אינהרנטי בשפה.
ומי שלא מאמין לי – שיחפש בגוגל. או שיקרא כאן את הכתבה הזו שמסכמת את הכל ונמצאת בכלי תקשורת מכובד ולא בבלוג קיקיוני של מתכנתים.
כתוב מיד לאחר דוגמת הקוד הראשונה:
"במקרה הזה היא מקבלת שני ארגומנטים. הראשון הוא התו או התוים שאנחנו רוצים להכניס והשני הוא האורך הכולל של המחרוזת שאנחנו רוצים שיווצר בסוף."
הכוונה היא להיפך, נכון?