JavaScript मध्ये मानवी

Noah Rousseau

गुरुवार, २७ जून, २०२४ रोजी ९:१४:३७ म.उ.

जेएसओएनला मानवांसाठी अधिक वाचनीय बनवणे
JSON सह कार्य करणे हे विकसकांसाठी एक सामान्य कार्य आहे, विशेषत: API आणि डेटा संचयनाशी व्यवहार करताना. तथापि, रॉ JSON त्याच्या फॉरमॅटिंगच्या अभावामुळे वाचणे आणि समजणे कठीण होऊ शकते. JSON अधिक प्रवेशयोग्य बनवू पाहणाऱ्यांसाठी, योग्य इंडेंटेशन आणि व्हाईटस्पेस लागू करणे महत्त्वाचे आहे.
या लेखात, आम्ही JavaScript वापरून JSON सुंदर-मुद्रित करण्याच्या विविध पद्धती शोधू. आम्ही केवळ मूलभूत इंडेंटेशन आणि व्हाइटस्पेस तंत्रच नाही तर रंग आणि फॉन्ट शैलींसह वाचनीयता कशी वाढवायची हे देखील कव्हर करू. हे मार्गदर्शक तुम्हाला रॉ JSON चे मानवी-अनुकूल स्वरूपात रूपांतरित करण्यात मदत करेल.

आज्ञा वर्णन

JSON.stringify(json, null, 2) 2-स्पेस इंडेंटेशनसह JavaScript ऑब्जेक्टला JSON स्ट्रिंगमध्ये रूपांतरित करते.

.replace(/(".*?"|null|true|false|\d+)/g, ...) सानुकूल स्वरूपनासाठी विशिष्ट JSON घटक ओळखण्यासाठी नियमित अभिव्यक्ती वापरते.

http.createServer(...).listen() Node.js मध्ये HTTP सर्व्हर तयार करतो जो निर्दिष्ट पोर्टवर ऐकतो.

res.writeHead(200, { 'Content-Type': 'application/json' }) सामग्री प्रकार JSON आहे हे सूचित करण्यासाठी HTTP प्रतिसाद शीर्षलेख सेट करते.

res.end() क्लायंटला प्रतिसाद परत पाठवते आणि सर्व प्रतिसाद शीर्षलेख आणि मुख्य भाग पाठवले गेल्याचे संकेत देते.

document.body.innerHTML दस्तऐवजातील मुख्य घटकाची HTML सामग्री सेट करते किंवा मिळवते.

आज्ञा	वर्णन
JSON.stringify(json, null, 2)	2-स्पेस इंडेंटेशनसह JavaScript ऑब्जेक्टला JSON स्ट्रिंगमध्ये रूपांतरित करते.
.replace(/(".*?"\|null\|true\|false\|\d+)/g, ...)	सानुकूल स्वरूपनासाठी विशिष्ट JSON घटक ओळखण्यासाठी नियमित अभिव्यक्ती वापरते.
http.createServer(...).listen()	Node.js मध्ये HTTP सर्व्हर तयार करतो जो निर्दिष्ट पोर्टवर ऐकतो.
res.writeHead(200, { 'Content-Type': 'application/json' })	सामग्री प्रकार JSON आहे हे सूचित करण्यासाठी HTTP प्रतिसाद शीर्षलेख सेट करते.
res.end()	क्लायंटला प्रतिसाद परत पाठवते आणि सर्व प्रतिसाद शीर्षलेख आणि मुख्य भाग पाठवले गेल्याचे संकेत देते.
document.body.innerHTML	दस्तऐवजातील मुख्य घटकाची HTML सामग्री सेट करते किंवा मिळवते.

JSON स्वरूपन स्क्रिप्टचे तपशीलवार स्पष्टीकरण

पहिली स्क्रिप्ट हे एक फ्रंटएंड JavaScript सोल्यूशन आहे जे इंडेंटेशन जोडून आणि कलर कोडिंग लागू करून JSON ला सुंदर-मुद्रित करण्यासाठी डिझाइन केलेले आहे. स्क्रिप्ट नावाच्या फंक्शनने सुरू होते , जे इनपुट म्हणून JSON ऑब्जेक्ट घेते. या फंक्शनच्या आत, JSON ऑब्जेक्टला 2-स्पेस इंडेंटेशन वापरून स्ट्रिंगमध्ये रूपांतरित केले जाते पद्धत हे आवश्यक व्हाइटस्पेस जोडून JSON अधिक वाचनीय असल्याची खात्री करते. वाचनीयता आणखी वाढवण्यासाठी, स्क्रिप्ट वापरते a स्ट्रिंग, संख्या, बुलियन आणि शून्य मूल्यांसारख्या विशिष्ट JSON घटकांशी जुळण्यासाठी नियमित अभिव्यक्तीसह पद्धत. प्रत्येक जुळलेला घटक a मध्ये गुंडाळलेला आहे CSS ला प्रत्येक डेटा प्रकारावर वेगवेगळे रंग लागू करण्याची अनुमती देऊन संबंधित वर्गासह टॅग करा. स्वरूपित JSON स्ट्रिंग नंतर दस्तऐवजाच्या मुख्य भागामध्ये वापरून घातली जाते .

दुसरी स्क्रिप्ट हे बॅकएंड सोल्यूशन आहे जेएसओएन प्रीटी-प्रिंट करण्यासाठी Node.js वापरून. ही स्क्रिप्ट एक HTTP सर्व्हर तयार करते , जे वापरून निर्दिष्ट पोर्टवर येणाऱ्या विनंत्या ऐकते . विनंती मिळाल्यावर, सर्व्हर वाचनीयतेसाठी स्वरूपित केलेल्या JSON ऑब्जेक्टसह प्रतिसाद देतो. JSON ऑब्जेक्ट वापरून इंडेंटेशनसह स्ट्रिंगमध्ये रूपांतरित केले जाते . प्रतिसाद शीर्षलेख हे सूचित करण्यासाठी सेट केले आहे की सामग्री प्रकार JSON सह आहे ७. शेवटी, सुंदर-मुद्रित JSON स्ट्रिंग वापरून क्लायंटला पाठवले जाते . ही स्क्रिप्ट विकासकांना त्यांच्या ब्राउझरमध्ये फक्त सर्व्हरच्या पत्त्यावर नेव्हिगेट करून छान स्वरूपित JSON आउटपुट पाहण्याची परवानगी देते.

चांगल्या वाचनीयतेसाठी JSON फॉरमॅट करण्यासाठी JavaScript वापरणे

फ्रंटएंड JavaScript

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

प्रीटी-प्रिंट JSON ला बॅकएंड ॲप्रोच

Node.js सह बॅकएंड

१

अतिरिक्त साधनांसह JSON वाचनीयता वाढवणे

मागील सोल्यूशन्सने JSON प्रिटी-प्रिंट करण्यासाठी फ्रंटएंड आणि बॅकएंड JavaScript पद्धतींवर लक्ष केंद्रित केले असताना, इतर साधने आणि तंत्रे आहेत जी JSON वाचनीयता वाढवू शकतात. एक लोकप्रिय दृष्टीकोन म्हणजे ब्राउझर विस्तार किंवा ऑनलाइन साधने वापरणे. JSONView किंवा JSON फॉरमॅटर सारखे विस्तार, वाचनीयता सुधारण्यासाठी इंडेंटेशन आणि कलर कोडिंग जोडून, ब्राउझरमध्ये JSON स्वयंचलितपणे स्वरूपित करू शकतात. ही साधने विशेषतः विकासकांसाठी उपयुक्त आहेत जे वारंवार API सह संवाद साधतात आणि अतिरिक्त कोड न लिहिता JSON डेटा द्रुतपणे पार्स करणे आणि समजून घेणे आवश्यक आहे.

दुसऱ्या उपयुक्त पद्धतीमध्ये Highlight.js किंवा Prism.js सारख्या लायब्ररीचा लाभ घेणे समाविष्ट आहे, जे JSON सह विविध प्रोग्रामिंग भाषांसाठी वाक्यरचना हायलाइटिंग हाताळण्यासाठी डिझाइन केलेले आहे. JSON डेटा डायनॅमिकली फॉरमॅट करण्यासाठी आणि हायलाइट करण्यासाठी या लायब्ररी वेब ऍप्लिकेशन्समध्ये समाकलित केल्या जाऊ शकतात. वापरून , तुम्ही JSON स्ट्रिंगवर पूर्वनिर्धारित थीम लागू करू शकता, ज्यामुळे विविध डेटा प्रकारांमध्ये फरक करणे सोपे होईल. याव्यतिरिक्त, अशा लायब्ररींना तुमच्या डेव्हलपमेंट वर्कफ्लोमध्ये समाकलित केल्याने वेळेची बचत होऊ शकते आणि विविध प्रकल्पांमध्ये JSON फॉरमॅटिंगमध्ये सातत्य सुनिश्चित होऊ शकते.

प्रीटी-प्रिंटिंग JSON म्हणजे काय?
प्रीटी-प्रिंटिंग JSON म्हणजे इंडेंटेशन आणि व्हाइटस्पेससह JSON डेटा फॉरमॅट करणे जेणेकरुन ते मानवांसाठी अधिक वाचनीय होईल.
JSON स्वरूपन महत्वाचे का आहे?
योग्य JSON स्वरूपन वाचनीयता सुधारते आणि विकासकांना डेटाची रचना आणि सामग्री द्रुतपणे समजून घेण्यास मदत करते.
काय आहे पद्धत?
द पद्धत JavaScript ऑब्जेक्टला JSON स्ट्रिंगमध्ये रूपांतरित करते.
कसे सुंदर छपाई मध्ये मदत?
उत्तीर्ण करून तिसरा युक्तिवाद (इंडेंटेशन स्तर), तुम्ही JSON स्ट्रिंग इंडेंटेशनसह फॉरमॅट करू शकता.
Highlight.js म्हणजे काय?
Highlight.js ही सिंटॅक्स हायलाइटिंगसाठी लायब्ररी आहे जी JSON डेटा फॉरमॅट आणि हायलाइट करण्यासाठी वापरली जाऊ शकते.
JSON फॉरमॅट करण्यासाठी मी ब्राउझर विस्तार वापरू शकतो का?
होय, JSONView किंवा JSON Formatter सारखे विस्तार तुमच्या ब्राउझरमध्ये JSON स्वयंचलितपणे स्वरूपित करू शकतात.
चा उद्देश काय आहे JSON स्वरूपनात पद्धत?
द रेग्युलर एक्सप्रेशनसह पद्धत वेगवेगळ्या JSON घटकांमध्ये रंग कोडींग जोडण्यासाठी वापरली जाऊ शकते.
प्रीटी-प्रिंटिंग JSON साठी सामान्य वापर केस काय आहे?
प्रीटी-प्रिंटिंग JSON सामान्यतः डीबग करताना किंवा जेएसओएन डेटा गैर-तांत्रिक भागधारकांना सादर करताना वापरले जाते.
मी Node.js मध्ये JSON प्रीटी-प्रिंट कसे करू शकतो?
तुम्ही Node.js मध्ये HTTP सर्व्हर तयार करू शकता आणि वापरू शकता JSON प्रतिसाद फॉरमॅट करण्यासाठी.

डेटाची वाचनीयता आणि उपयोगिता सुधारण्यासाठी प्रीटी-प्रिंटिंग JSON आवश्यक आहे. JavaScript वापरून, विकासक JSON अधिक मानव-अनुकूल बनवण्यासाठी इंडेंटेशन, व्हाइटस्पेस आणि कलर कोडिंग लागू करू शकतात. याव्यतिरिक्त, ब्राउझर विस्तार आणि सिंटॅक्स हायलाइटिंग लायब्ररीचा फायदा घेऊन फॉरमॅटिंग आणखी वाढवू शकते. ही तंत्रे एकत्रितपणे JSON डेटाचे चांगले डीबगिंग आणि सादरीकरण करण्यात मदत करतात, डेटा हाताळणीत स्पष्टता आणि कार्यक्षमता सुनिश्चित करतात.

JavaScript मध्ये मानवी वाचनीयतेसाठी JSON फॉरमॅट करणे

JSON स्वरूपन स्क्रिप्टचे तपशीलवार स्पष्टीकरण

चांगल्या वाचनीयतेसाठी JSON फॉरमॅट करण्यासाठी JavaScript वापरणे

प्रीटी-प्रिंट JSON ला बॅकएंड ॲप्रोच

अतिरिक्त साधनांसह JSON वाचनीयता वाढवणे