JSON ஐ மனிதர்களுக்கு மேலும் படிக்கக்கூடியதாக மாற்றுகிறது
JSON உடன் பணிபுரிவது டெவலப்பர்களுக்கு ஒரு பொதுவான பணியாகும், குறிப்பாக APIகள் மற்றும் தரவு சேமிப்பகத்தைக் கையாளும் போது. இருப்பினும், raw JSON வடிவமைப்பில் இல்லாததால் அதைப் படித்து புரிந்துகொள்வது கடினமாக இருக்கும். JSON ஐ இன்னும் அணுகக்கூடியதாக மாற்ற விரும்புவோருக்கு, சரியான உள்தள்ளல் மற்றும் இடைவெளியைப் பயன்படுத்துவது முக்கியம்.
இந்தக் கட்டுரையில், ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி JSON ஐ அழகாக அச்சிடுவதற்கான பல்வேறு முறைகளை ஆராய்வோம். அடிப்படை உள்தள்ளல் மற்றும் இடைவெளி நுட்பங்கள் மட்டுமல்லாமல், வண்ணங்கள் மற்றும் எழுத்துரு பாணிகளுடன் வாசிப்புத்திறனை எவ்வாறு மேம்படுத்துவது என்பதையும் நாங்கள் காண்போம். இந்த வழிகாட்டி, raw JSON ஐ மனித நட்பு வடிவமாக மாற்ற உதவும்.
கட்டளை | விளக்கம் |
---|---|
JSON.stringify(json, null, 2) | ஜாவாஸ்கிரிப்ட் பொருளை 2-ஸ்பேஸ் உள்தள்ளலுடன் JSON சரமாக மாற்றுகிறது. |
.replace(/(".*?"|null|true|false|\d+)/g, ...) | தனிப்பயன் வடிவமைப்பிற்கான குறிப்பிட்ட JSON கூறுகளை அடையாளம் காண வழக்கமான வெளிப்பாட்டைப் பயன்படுத்துகிறது. |
http.createServer(...).listen() | குறிப்பிட்ட போர்ட்டில் கேட்கும் HTTP சர்வரை Node.js இல் உருவாக்குகிறது. |
res.writeHead(200, { 'Content-Type': 'application/json' }) | உள்ளடக்க வகை JSON என்பதைக் குறிக்க HTTP மறுமொழித் தலைப்பை அமைக்கிறது. |
res.end() | பதிலை வாடிக்கையாளருக்கு திருப்பி அனுப்புகிறது மற்றும் அனைத்து பதில் தலைப்புகளும் உள்ளடக்கமும் அனுப்பப்பட்டதை சமிக்ஞை செய்கிறது. |
document.body.innerHTML | ஆவணத்தில் உள்ள உடல் உறுப்புகளின் HTML உள்ளடக்கத்தை அமைக்கிறது அல்லது பெறுகிறது. |
JSON வடிவமைப்பு ஸ்கிரிப்ட்களின் விரிவான விளக்கம்
முதல் ஸ்கிரிப்ட், உள்தள்ளலைச் சேர்ப்பதன் மூலமும், வண்ணக் குறியீட்டைப் பயன்படுத்துவதன் மூலமும் JSON ஐ அழகாக அச்சிட வடிவமைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் தீர்வு. ஸ்கிரிப்ட் ஒரு செயல்பாட்டுடன் தொடங்குகிறது prettyPrintJSON, இது ஒரு JSON பொருளை உள்ளீடாக எடுத்துக்கொள்கிறது. இந்த செயல்பாட்டின் உள்ளே, JSON பொருள் 2-ஸ்பேஸ் உள்தள்ளலைப் பயன்படுத்தி சரமாக மாற்றப்படுகிறது JSON.stringify(json, null, 2) முறை. தேவையான இடைவெளியைச் சேர்ப்பதன் மூலம் JSON மேலும் படிக்கக்கூடியதாக இருப்பதை இது உறுதி செய்கிறது. வாசிப்புத்திறனை மேலும் மேம்படுத்த, ஸ்கிரிப்ட் பயன்படுத்துகிறது a .replace(/(".*?"|null|true|false|\d+)/g, ...) சரங்கள், எண்கள், பூலியன்கள் மற்றும் பூஜ்ய மதிப்புகள் போன்ற குறிப்பிட்ட JSON உறுப்புகளுடன் பொருந்த வழக்கமான வெளிப்பாடு கொண்ட முறை. பொருந்திய ஒவ்வொரு உறுப்பும் a இல் மூடப்பட்டிருக்கும் ஒவ்வொரு தரவு வகைக்கும் வெவ்வேறு வண்ணங்களைப் பயன்படுத்த CSS ஐ அனுமதிக்கும், தொடர்புடைய வகுப்பைக் குறியிடவும். வடிவமைக்கப்பட்ட JSON சரம் பின்னர் ஆவணத்தின் உடலில் செருகப்பட்டது document.body.innerHTML.
இரண்டாவது ஸ்கிரிப்ட் JSON ஐ அழகாக அச்சிட Node.js ஐப் பயன்படுத்தி ஒரு பின்தளத்தில் தீர்வு. இந்த ஸ்கிரிப்ட் ஒரு HTTP சேவையகத்தை உருவாக்குகிறது http.createServer(...), இது ஒரு குறிப்பிட்ட போர்ட்டில் உள்வரும் கோரிக்கைகளைப் பயன்படுத்தி கேட்கிறது .listen(). ஒரு கோரிக்கையைப் பெற்றவுடன், சேவையகம் படிக்கக்கூடிய வகையில் வடிவமைக்கப்பட்ட JSON பொருளுடன் பதிலளிக்கிறது. JSON பொருள் உள்தள்ளலைப் பயன்படுத்தி சரமாக மாற்றப்படுகிறது JSON.stringify(json, null, 2). பதில் தலைப்பு, உள்ளடக்க வகை JSON உடன் இருப்பதைக் குறிக்கும் வகையில் அமைக்கப்பட்டுள்ளது res.writeHead(200, { 'Content-Type': 'application/json' }). இறுதியாக, அழகாக அச்சிடப்பட்ட JSON சரம் கிளையண்டிற்கு அனுப்பப்படும் res.end(). இந்த ஸ்கிரிப்ட் டெவலப்பர்கள், சர்வரின் முகவரிக்குச் செல்வதன் மூலம் தங்கள் உலாவியில் அழகாக வடிவமைக்கப்பட்ட JSON வெளியீட்டை விரைவாகக் காண அனுமதிக்கிறது.
சிறந்த வாசிப்புத்திறனுக்காக JSON ஐ வடிவமைக்க 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 உடன் பின்னிணைப்பு
const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'application/json' });
// Sample JSON data
const jsonData = {
name: "John",
age: 30,
city: "New York",
isStudent: false
};
// Send pretty-printed JSON
res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
கூடுதல் கருவிகள் மூலம் JSON படிக்கக்கூடிய தன்மையை மேம்படுத்துகிறது
முந்தைய தீர்வுகள் JSON ஐ அழகாக அச்சிடுவதற்கு முன் மற்றும் பின்தளத்தில் ஜாவாஸ்கிரிப்ட் முறைகளில் கவனம் செலுத்தியிருந்தாலும், JSON வாசிப்புத் திறனை மேலும் மேம்படுத்தக்கூடிய பிற கருவிகள் மற்றும் நுட்பங்கள் உள்ளன. உலாவி நீட்டிப்புகள் அல்லது ஆன்லைன் கருவிகளைப் பயன்படுத்துவது ஒரு பிரபலமான அணுகுமுறை. JSONView அல்லது JSON Formatter போன்ற நீட்டிப்புகள் தானாகவே JSON ஐ உலாவியில் வடிவமைக்கலாம், மேலும் படிக்கக்கூடிய தன்மையை மேம்படுத்த உள்தள்ளல் மற்றும் வண்ணக் குறியீட்டைச் சேர்க்கலாம். APIகளுடன் அடிக்கடி தொடர்புகொள்ளும் டெவலப்பர்களுக்கு இந்தக் கருவிகள் மிகவும் பயனுள்ளதாக இருக்கும், மேலும் கூடுதல் குறியீட்டை எழுதாமல் JSON தரவை விரைவாக அலசிப் புரிந்து கொள்ள வேண்டும்.
மற்றொரு பயனுள்ள முறையானது Highlight.js அல்லது Prism.js போன்ற நூலகங்களை மேம்படுத்துவதை உள்ளடக்கியது, அவை JSON உட்பட பல்வேறு நிரலாக்க மொழிகளுக்கான தொடரியல் சிறப்பம்சத்தைக் கையாள வடிவமைக்கப்பட்டுள்ளன. இந்த நூலகங்கள் JSON தரவை மாறும் வடிவமைத்து முன்னிலைப்படுத்த இணையப் பயன்பாடுகளில் ஒருங்கிணைக்கப்படலாம். பயன்படுத்தி Highlight.js, நீங்கள் JSON சரங்களுக்கு முன் வரையறுக்கப்பட்ட தீம்களைப் பயன்படுத்தலாம், இது வெவ்வேறு தரவு வகைகளை வேறுபடுத்துவதை எளிதாக்குகிறது. கூடுதலாக, இதுபோன்ற நூலகங்களை உங்கள் மேம்பாட்டுப் பணிப்பாய்வுகளில் ஒருங்கிணைப்பதன் மூலம் நேரத்தைச் சேமிக்கலாம் மற்றும் வெவ்வேறு திட்டங்களில் JSON வடிவமைப்பில் நிலைத்தன்மையை உறுதிப்படுத்தலாம்.
JSON வடிவமைப்பு பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்
- அழகான-அச்சிடும் JSON என்றால் என்ன?
- பிரட்டி-பிரிண்டிங் JSON என்பது JSON தரவை உள்தள்ளல் மற்றும் இடைவெளியுடன் வடிவமைப்பதைக் குறிக்கிறது.
- JSON வடிவமைப்பு ஏன் முக்கியமானது?
- சரியான JSON வடிவமைப்பு வாசிப்புத்திறனை மேம்படுத்துகிறது மற்றும் டெவலப்பர்கள் தரவின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தை விரைவாகப் புரிந்துகொள்ள உதவுகிறது.
- என்ன JSON.stringify முறை?
- தி JSON.stringify முறை ஜாவாஸ்கிரிப்ட் பொருளை JSON சரமாக மாற்றுகிறது.
- எப்படி செய்கிறது JSON.stringify அழகாக அச்சிட உதவுமா?
- கடந்து செல்வதன் மூலம் JSON.stringify மூன்றாவது வாதம் (உள்தள்ளல் நிலை), நீங்கள் JSON சரத்தை உள்தள்ளலுடன் வடிவமைக்கலாம்.
- Highlight.js என்றால் என்ன?
- Highlight.js என்பது JSON தரவை வடிவமைக்கவும் தனிப்படுத்தவும் பயன்படும் தொடரியல் சிறப்பம்சத்திற்கான நூலகமாகும்.
- JSONஐ வடிவமைக்க உலாவி நீட்டிப்புகளைப் பயன்படுத்தலாமா?
- ஆம், JSONView அல்லது JSON Formatter போன்ற நீட்டிப்புகள் உங்கள் உலாவியில் JSON ஐ தானாக வடிவமைக்க முடியும்.
- இதன் நோக்கம் என்ன replace JSON வடிவமைப்பில் உள்ள முறை?
- தி replace வெவ்வேறு JSON உறுப்புகளுக்கு வண்ணக் குறியீட்டைச் சேர்க்க வழக்கமான வெளிப்பாட்டைக் கொண்ட முறை பயன்படுத்தப்படலாம்.
- JSON ஐ அழகாக அச்சிடுவதற்கான பொதுவான பயன்பாடு என்ன?
- பிழைத்திருத்தம் செய்யும் போது அல்லது தொழில்நுட்பம் அல்லாத பங்குதாரர்களுக்கு JSON தரவை வழங்கும் போது அழகாக-அச்சிடும் JSON பொதுவாகப் பயன்படுத்தப்படுகிறது.
- Node.js இல் JSON ஐ எப்படி அழகாக அச்சிடுவது?
- Node.js இல் HTTP சர்வரை உருவாக்கி பயன்படுத்தலாம் JSON.stringify JSON பதில்களை வடிவமைக்க.
JSON வடிவமைப்பு பற்றிய இறுதி எண்ணங்கள்
தரவின் வாசிப்புத்திறன் மற்றும் பயன்பாட்டினை மேம்படுத்துவதற்கு அழகான அச்சிடுதல் JSON இன்றியமையாதது. ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி, டெவலப்பர்கள் உள்தள்ளல், இடைவெளி மற்றும் வண்ணக் குறியீட்டைப் பயன்படுத்துவதன் மூலம் JSON ஐ மனிதனுக்கு ஏற்றதாக மாற்றலாம். கூடுதலாக, உலாவி நீட்டிப்புகளை மேம்படுத்துதல் மற்றும் தொடரியல் சிறப்பம்சமாக நூலகங்கள் வடிவமைப்பை மேலும் மேம்படுத்தலாம். இந்த நுட்பங்கள் கூட்டாக JSON தரவின் சிறந்த பிழைத்திருத்தம் மற்றும் விளக்கக்காட்சிக்கு உதவுகின்றன, தரவு கையாளுதலில் தெளிவு மற்றும் செயல்திறனை உறுதி செய்கின்றன.