אתה עשוי לחשוב כי 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 ממני? הירשם לניוזלטר שלי. או עקוב אחרי בטוויטר