אתה עשוי לחשוב כי encodeURIו encodeURIComponentלעשות את אותו הדבר, לפחות מן השמות שלהם. ואתה עלול להיות מבולבל באיזה מהם להשתמש ומתי.
במאמר זה, אפרק את ההבדל בין encodeURIלבין encodeURIComponent.
מהו URI וכיצד הוא שונה מכתובת אתר?
URI מייצג מזהה משאבים אחיד.
URL מייצג את Uniform Resource Locator.
כל מה שמזהה משאב באופן ייחודי הוא ה- URI שלו, כגון מזהה, שם או מספר ISBN. URL מציין משאב וכיצד ניתן לגשת אליו (הפרוטוקול). כל כתובות ה- URL הן URI, אך לא כל ה- URI הן כתובות URL.
מדוע עלינו לקודד?
כתובות אתרים יכולות לכלול רק תווים מסוימים מתוך ערכת ASCII הרגילה של 128 תווים. יש לקודד תווים שמורים שאינם שייכים לסט זה.
פירוש הדבר שעלינו לקודד את התווים הללו בעת מעבר לכתובת אתר. תווים מיוחדים כגון &, space, !כאשר נכנסו ב צורך url להיות נמלט, אחרת הם עלולים לגרום למצבים בלתי צפויים.
מקרי שימוש:
- המשתמש הגיש ערכים בצורה שעשויה להיות בפורמט מחרוזת וצריך להעביר אותם, כמו שדות URL.
- צריך לקבל פרמטרים של מחרוזת שאילתה על מנת להגיש בקשות GET.
מה ההבדל בין encodeURI ל- encodeURIComponent?
encodeURIו encodeURIComponentמשמשים מזהים משאבים אחיד לקודד (כתובות אתרים) על ידי החלפת תווים מסוימים על ידי אחד, שניים, שלושה או ארבעה רצפי בריחה המייצג את הקידוד UTF-8 של הדמות.
encodeURIComponentיש להשתמש בקידוד רכיב URI - מחרוזת שאמורה להיות חלק מכתובת אתר.
encodeURIיש להשתמש בקידוד URI או כתובת URL קיימת.
הנה טבלה שימושית של ההבדל בקידוד תווים
אילו דמויות מקודדות?
encodeURI() לא יקודד: ~!@#$&*()=:/,;?+'
encodeURIComponent() לא יקודד: ~!*()'
הדמויות A-Z a-z 0-9 - _ . ! ~ * ' ( )לא נמלטות.
דוגמאות
const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch מתי לקודד
כאשר מקבלים קלט שעשוי להכיל רווחים.
encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.htmlבעת בניית כתובת URL מפרמטרים של מחרוזת שאילתה.
let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99כאשר מקבלים פרמטרים של שאילתות שעשויים להכיל תווים שמורים.
let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple סיכום
אם יש לך כתובת אתר מלאה, השתמש encodeURI. אבל אם יש לך חלק מכתובת אתר, השתמש encodeURIComponent.
מעוניין בהדרכות נוספות ו- JSBytes ממני? הירשם לניוזלטר שלי. או עקוב אחרי בטוויטר