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

1. מה עושה replaceAll

הפונקציה string.replace ב JavaScript מחליפה דברים בתוך מחרוזת ומחזירה מחרוזת חדשה מוחלפת. אפשר להשתמש בה כדי להחליף טקסט או ביטוי רגולארי בטקסט אחר או בתוצאת הפעלה של פונקציה. הנה שתי דוגמאות מהתיעוד:

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"


const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"

הרבה אנשים כשהיו צריכים להחליף מספר מופעים של מילה במילה אחרת השתמשו ביכולת של replace לקבל ביטוי רגולארי והוסיפו את הדגל g לסוף הביטוי:

console.log(p.replace(/dog/g, 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

עכשיו ב ES2021 קיבלנו את הפונקציה replaceAll ואנחנו יכולים כבר לכתוב:

console.log(p.replaceAll('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

2. אז למה זה חשוב?

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

const t1 = '*** hello ***';
const t2 = '*';

console.log(t1.replace(/t2/g, '-'));

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

עם replaceAll כבר אין לנו בעיות, וגם הקוד יוצא הרבה יותר ברור:

const t1 = '*** hello ***';
const t2 = '*';
console.log(t1.replaceAll(t2, '-'));

// --- hello ---

למידע נוסף על הפונקציה שווה להעיף מבט בדף התיעוד בקישור: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll.