דלג לתוכן
🛠️
Whiz Tools

מעצב JSON: מזעור ויופי JSON באינטרנט בחינם

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

מעצב JSON

מחשבון טעינה...
📚

תיעוד

מעצב JSON: כיווץ וייפוי JSON

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

מהו JSON?

JSON, קיצור של JavaScript Object Notation, הוא פורמט טקסט לאחסון ולשליחה של נתונים. שרתי אינטרנט משתמשים בו כדי לשלוח מידע לאפליקציות ולדפדפנים. תוכניות משתמשות בו בקובצי הגדרות. הוא מאחסן נתונים כאובייקטים, הכתובים באמצעות סוגריים מסולסלים {}, וכמערכים, הכתובים באמצעות סוגריים מרובעים []. בתוך אובייקט, לכל פריט נתונים יש שם, הנקרא מפתח, וערך. ערך יכול להיות מחרוזת, מספר, true, false, null, או אובייקט או מערך אחר.

אובייקט JSON קטן נראה כך:

1{
2  "name": "John Doe",
3  "age": 30,
4  "isEmployee": true
5}
6

כיצד מעצב JSON זה פועל

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

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

אם הטקסט אינו JSON תקין, הכלי נעצר ומציג שגיאה במקום לנחש למה התכוונו.

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

כיצד לכווץ JSON

  1. הדביקו JSON בתיבת הקלט.
  2. לחצו על "Minify".
  3. הכלי מסיר רווחים, טאבים ומעברי שורה בין אסימונים ומציג את התוצאה למטה.
  4. לחצו על "Copy" שמעל לתוצאה כדי להעתיק אותה.

דוגמה פתורה

לפני:

1{
2  "name": "John Smith",
3  "age": 32,
4  "skills": [
5    "JavaScript",
6    "HTML",
7    "CSS"
8  ]
9}
10

אחרי:

1{"name":"John Smith","age":32,"skills":["JavaScript","HTML","CSS"]}
2

נוסחת כיווץ JSON

את המקום שנחסך באמצעות כיווץ אפשר לכתוב כך:

המקום שנחסך=(1−הגודל לאחר הכיווץהגודל המקורי)×100%\text{המקום שנחסך} = \left(1 - \frac{\text{הגודל לאחר הכיווץ}}{\text{הגודל המקורי}}\right) \times 100\%

בדוגמה שלמעלה, הגרסה המעוצבת היא בגודל 98 בתים והגרסה המכווצת היא בגודל 67 בתים:

(1−6798)×100%≈32%\left(1 - \frac{67}{98}\right) \times 100\% \approx 32\%

החיסכון המדויק תלוי בכמות הרווחים הלבנים וההזחה שהיו במסמך המקורי. מסמך עם קינון עמוק והזחה של 4 רווחים מצטמצם יותר ממסמך שכבר היה דחוס.

כיצד לייפות JSON

  1. הדביקו JSON בתיבת הקלט. הוא יכול להיות כבר מכווץ או מעוצב בצורה מבולגנת.
  2. לחצו על "Beautify".
  3. הכלי מוסיף הזחה של 2 רווחים, מעבר שורה אחד לכל מפתח או פריט במערך, ורווח אחרי כל נקודתיים.
  4. לחצו על "Copy" שמעל לתוצאה כדי להעתיק אותה.

דוגמה פתורה

לפני:

1{"name":"John Smith","age":32,"skills":["JavaScript","HTML","CSS"]}
2

אחרי:

1{
2  "name": "John Smith",
3  "age": 32,
4  "skills": [
5    "JavaScript",
6    "HTML",
7    "CSS"
8  ]
9}
10

אובייקט או מערך ריק נשאר בשורה אחת, כמו {} או [], במקום להתפצל על פני שלוש שורות.

שגיאות JSON נפוצות שהכלי מזהה

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

  • פסיק חסר בין שני ערכים.
  • פסיק מיותר אחרי הפריט האחרון באובייקט או במערך (אינו מותר ב־JSON, בניגוד ל־JavaScript).
  • מפתח שאינו מוקף במירכאות כפולות.
  • מירכאות יחידות סביב מחרוזת במקום מירכאות כפולות.
  • סוגריים או סוגריים מסולסלים שאינם תואמים או חסרים.
  • רצף מילוט לא תקין או חלקי בתוך מחרוזת, כגון קו נטוי הפוך בודד.
  • תו בקרה, כגון מעבר שורה או טאב ממשיים, שהוקלד בתוך מחרוזת במקום להיכתב כ־\n או כ־\t.
  • מספר בצורה שאינה מותרת ב־JSON, כגון אפס מוביל (01), נקודה עשרונית בסוף (1.) או סימן פלוס מוביל (+1).

גם ב־JSON אין תחביר להערות. טקסט שמתחיל ב־// או ב־/* אינו חלק מדקדוק ה־JSON, ולכן הדבקה של JSON שמכיל הערות מפיקה שגיאת "Invalid JSON" במקום JSON שההערות הוסרו ממנו בשקט. כדי לעצב קובץ כזה, הסירו תחילה את ההערות.

שימושים במעצב JSON

  • פיתוח אתרים: קריאת תגובות API במהלך איתור באגים, וכיווץ קובצי הגדרות לפני פריסה.
  • פיתוח API: בדיקה שגוף בקשה או תגובה הוא JSON תקין.
  • ניתוח נתונים: הפיכת ייצוא JSON דחוס לפריסה קריאה לצורך בדיקה.
  • קובצי הגדרות: ייפוי קובץ הגדרות לפני עריכה ידנית, ולאחר מכן כיווצו מחדש.

חלופות

עורכי קוד כגון Visual Studio Code יכולים לעצב קובצי JSON בלי לצאת מהעורך. כלי שורת פקודה כגון jq יכולים לעצב ולסנן JSON כחלק מסקריפט. גם שפות תכנות כוללות ספריות JSON, כגון המודול json של Python או האובייקט המובנה JSON של JavaScript, שרוב התוכניות משתמשות בו כדי לנתח JSON ולהמירו למבני הנתונים שלהן. מעצב מקוון כמו זה שימושי כשנדרשת בדיקה מהירה וחד־פעמית בלי להתקין דבר.

ההיסטוריה של JSON

דאגלס קרוקפורד הגדיר את JSON בתחילת שנות ה־2000, על סמך האופן שבו JavaScript כותבת ליטרלים של אובייקטים, אך תכנן אותו כך שכל שפת תכנות תוכל לקרוא ולכתוב אותו. התבנית תועדה לראשונה בפומבי בסביבות 2001, ובהמשך תוקננה כ־RFC 4627 בשנת (11,800 cm) 2006, כ־ECMA-404 בשנת (1,030 cm) 2013, וכ־RFC 8259 בשנת (21,000 cm) 2017. ככל שממשקי API של אתרים התפתחו במהלך שנות ה־2000, JSON החליף את XML כתבנית הנפוצה ביותר לשליחת נתונים בין שרתים לדפדפנים, בעיקר משום שהוא קצר יותר וממופה ישירות למבני נתונים שכבר מובנים ב־JavaScript. כלי עיצוב ואימות הופיעו בהמשך, ככל שמסמכי JSON נעשו גדולים ומקוננים יותר.

שאלות נפוצות

האם כיווץ מסיר הערות מ־JSON? לא. ל־JSON אין תחביר להערות, והכלי הזה אינו מוסיף תחביר כזה. אם הקלט מכיל הערות בסגנון // או /*, הכלי מדווח על שגיאת "Invalid JSON" במקום לעצב אותו. הסירו את ההערות לפני הדבקת הטקסט.

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

באיזו הזחה משתמש המייפה? שני רווחים לכל רמת קינון, עם רווח אחרי כל נקודתיים.

האם נתוני ה־JSON שלי נשלחים לשרת? לא. העיצוב מתבצע בדפדפן. הטקסט שהדבקתם מועתק לכתובת ה־URL של הדף, כפרמטר שאילתה json, כדי שאפשר יהיה לשתף או לסמן את הדף. שום דבר אינו מועלה.

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

האם JSON לא תקין יתוקן חלקית? לא. אם הקלט מפר את דקדוק ה־JSON במקום כלשהו, הכלי מציג שגיאה במקום להחזיר תוצאה חלקית או משוערת.

מקורות

  1. "Introducing JSON." JSON.org, https://www.json.org/json-en.html.
  2. Bray, T., עורך. "The JavaScript Object Notation (JSON) Data Interchange Format." RFC 8259, IETF, דצמבר 2017, https://www.rfc-editor.org/rfc/rfc8259.
  3. "ECMA-404: The JSON Data Interchange Syntax." Ecma International, https://www.ecma-international.org/publications-and-standards/standards/ecma-404/.
  4. "JSON." MDN Web Docs, Mozilla, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON.