JavaScript-ൽ ഹ്യൂമൻ

Noah Rousseau

2024, ജൂൺ 27, വ്യാഴാഴ്‌ച 9:12:32 PM

JSON മനുഷ്യർക്ക് കൂടുതൽ വായിക്കാവുന്നതാക്കുന്നു
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() ഒരു നിർദ്ദിഷ്ട പോർട്ടിൽ ശ്രദ്ധിക്കുന്ന ഒരു HTTP സെർവർ Node.js-ൽ സൃഷ്ടിക്കുന്നു.

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()	ഒരു നിർദ്ദിഷ്ട പോർട്ടിൽ ശ്രദ്ധിക്കുന്ന ഒരു HTTP സെർവർ Node.js-ൽ സൃഷ്ടിക്കുന്നു.
res.writeHead(200, { 'Content-Type': 'application/json' })	ഉള്ളടക്ക തരം JSON ആണെന്ന് സൂചിപ്പിക്കുന്നതിന് HTTP പ്രതികരണ തലക്കെട്ട് സജ്ജമാക്കുന്നു.
res.end()	പ്രതികരണം ക്ലയൻ്റിലേക്ക് തിരികെ അയയ്‌ക്കുകയും എല്ലാ പ്രതികരണ തലക്കെട്ടുകളും ബോഡിയും അയച്ചതായി സൂചന നൽകുകയും ചെയ്യുന്നു.
document.body.innerHTML	ഡോക്യുമെൻ്റിലെ ബോഡി എലമെൻ്റിൻ്റെ HTML ഉള്ളടക്കം സജ്ജീകരിക്കുകയോ നേടുകയോ ചെയ്യുന്നു.

JSON ഫോർമാറ്റിംഗ് സ്ക്രിപ്റ്റുകളുടെ വിശദമായ വിശദീകരണം

ഇൻഡൻ്റേഷൻ ചേർത്തും കളർ കോഡിംഗ് പ്രയോഗിച്ചും JSON പ്രെറ്റി-പ്രിൻ്റ് ചെയ്യാൻ രൂപകൽപ്പന ചെയ്ത ഒരു ഫ്രണ്ട്എൻഡ് JavaScript സൊല്യൂഷനാണ് ആദ്യ സ്‌ക്രിപ്റ്റ്. സ്ക്രിപ്റ്റ് ആരംഭിക്കുന്നത് ഒരു ഫംഗ്ഷനോടെയാണ് , ഒരു JSON ഒബ്ജക്റ്റ് ഇൻപുട്ടായി എടുക്കുന്നു. ഈ ഫംഗ്‌ഷനുള്ളിൽ, JSON ഒബ്‌ജക്റ്റ് 2-സ്‌പേസ് ഇൻഡൻ്റേഷൻ ഉപയോഗിച്ച് ഒരു സ്‌ട്രിംഗായി പരിവർത്തനം ചെയ്യുന്നു രീതി. ആവശ്യമായ വൈറ്റ്‌സ്‌പേസ് ചേർത്തുകൊണ്ട് JSON കൂടുതൽ വായിക്കാനാകുന്നതാണെന്ന് ഇത് ഉറപ്പാക്കുന്നു. വായനാക്ഷമത കൂടുതൽ മെച്ചപ്പെടുത്തുന്നതിന്, സ്ക്രിപ്റ്റ് എ ഉപയോഗിക്കുന്നു സ്‌ട്രിംഗുകൾ, നമ്പറുകൾ, ബൂളിയൻസ്, നൾ മൂല്യങ്ങൾ എന്നിവ പോലുള്ള നിർദ്ദിഷ്‌ട JSON ഘടകങ്ങളുമായി പൊരുത്തപ്പെടുന്നതിന് ഒരു സാധാരണ എക്‌സ്‌പ്രഷനോടുകൂടിയ രീതി. പൊരുത്തപ്പെടുന്ന ഓരോ ഘടകവും എയിൽ പൊതിഞ്ഞിരിക്കുന്നു ഓരോ ഡാറ്റാ തരത്തിലും വ്യത്യസ്ത നിറങ്ങൾ പ്രയോഗിക്കാൻ CSS-നെ അനുവദിക്കുന്ന ഒരു അനുബന്ധ ക്ലാസുമായി ടാഗ് ചെയ്യുക. ഫോർമാറ്റ് ചെയ്‌ത JSON സ്‌ട്രിംഗ് പിന്നീട് ഡോക്യുമെൻ്റിൻ്റെ ബോഡിയിൽ ചേർത്തു .

JSON പ്രെറ്റി-പ്രിൻ്റ് ചെയ്യുന്നതിന് Node.js ഉപയോഗിക്കുന്ന ഒരു ബാക്കെൻഡ് സൊല്യൂഷനാണ് രണ്ടാമത്തെ സ്ക്രിപ്റ്റ്. ഈ സ്ക്രിപ്റ്റ് ഒരു HTTP സെർവർ സൃഷ്ടിക്കുന്നു , ഇത് ഉപയോഗിച്ച് ഒരു നിർദ്ദിഷ്ട പോർട്ടിൽ ഇൻകമിംഗ് അഭ്യർത്ഥനകൾ ശ്രദ്ധിക്കുന്നു . ഒരു അഭ്യർത്ഥന ലഭിച്ചാൽ, വായനാക്ഷമതയ്ക്കായി ഫോർമാറ്റ് ചെയ്ത JSON ഒബ്‌ജക്റ്റ് ഉപയോഗിച്ച് സെർവർ പ്രതികരിക്കുന്നു. JSON ഒബ്‌ജക്റ്റ് ഇൻഡൻ്റേഷൻ ഉപയോഗിച്ച് ഒരു സ്‌ട്രിംഗിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു . പ്രതികരണ തലക്കെട്ട്, ഉള്ളടക്ക തരം JSON ഉള്ളതാണെന്ന് സൂചിപ്പിക്കാൻ സജ്ജീകരിച്ചിരിക്കുന്നു res.writeHead(200, { 'Content-Type': 'application/json' }). അവസാനമായി, പ്രെറ്റി-പ്രിൻ്റ് ചെയ്ത JSON സ്ട്രിംഗ് ഉപയോഗിച്ച് ക്ലയൻ്റിലേക്ക് അയയ്ക്കുന്നു . സെർവറിൻ്റെ വിലാസത്തിലേക്ക് കേവലം നാവിഗേറ്റ് ചെയ്യുന്നതിലൂടെ അവരുടെ ബ്രൗസറിൽ മനോഹരമായി ഫോർമാറ്റ് ചെയ്‌ത 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-നെ പ്രെറ്റി-പ്രിൻ്റ് ചെയ്യുന്നതിനുള്ള ഫ്രണ്ട്എൻഡ്, ബാക്ക്എൻഡ് JavaScript രീതികളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുമ്പോൾ, JSON റീഡബിലിറ്റി കൂടുതൽ മെച്ചപ്പെടുത്താൻ കഴിയുന്ന മറ്റ് ഉപകരണങ്ങളും സാങ്കേതികതകളും ഉണ്ട്. ബ്രൗസർ വിപുലീകരണങ്ങളോ ഓൺലൈൻ ടൂളുകളോ ഉപയോഗിക്കുന്നതാണ് ഒരു ജനപ്രിയ സമീപനം. JSONView അല്ലെങ്കിൽ JSON ഫോർമാറ്റർ പോലുള്ള വിപുലീകരണങ്ങൾക്ക് ബ്രൗസറിൽ JSON സ്വയമേ ഫോർമാറ്റ് ചെയ്യാൻ കഴിയും, വായനാക്ഷമത മെച്ചപ്പെടുത്തുന്നതിന് ഇൻഡൻ്റേഷനും കളർ കോഡിംഗും ചേർക്കുന്നു. എപിഐകളുമായി ഇടയ്ക്കിടെ ഇടപഴകുന്ന ഡെവലപ്പർമാർക്ക് ഈ ടൂളുകൾ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്, കൂടാതെ അധിക കോഡ് എഴുതാതെ തന്നെ JSON ഡാറ്റ വേഗത്തിൽ പാഴ്‌സ് ചെയ്യുകയും മനസ്സിലാക്കുകയും വേണം.

JSON ഉൾപ്പെടെയുള്ള വിവിധ പ്രോഗ്രാമിംഗ് ഭാഷകൾക്കായി സിൻ്റാക്സ് ഹൈലൈറ്റിംഗ് കൈകാര്യം ചെയ്യാൻ രൂപകൽപ്പന ചെയ്തിട്ടുള്ള Highlight.js അല്ലെങ്കിൽ Prism.js പോലുള്ള ലൈബ്രറികൾ പ്രയോജനപ്പെടുത്തുന്നതാണ് മറ്റൊരു ഉപയോഗപ്രദമായ രീതി. JSON ഡാറ്റ ഡൈനാമിക്കായി ഫോർമാറ്റ് ചെയ്യാനും ഹൈലൈറ്റ് ചെയ്യാനും ഈ ലൈബ്രറികളെ വെബ് ആപ്ലിക്കേഷനുകളിലേക്ക് സംയോജിപ്പിക്കാൻ കഴിയും. ഉപയോഗിച്ച് , നിങ്ങൾക്ക് JSON സ്ട്രിംഗുകളിലേക്ക് മുൻകൂട്ടി നിശ്ചയിച്ച തീമുകൾ പ്രയോഗിക്കാൻ കഴിയും, ഇത് വ്യത്യസ്ത ഡാറ്റ തരങ്ങൾ തമ്മിൽ വേർതിരിച്ചറിയുന്നത് എളുപ്പമാക്കുന്നു. കൂടാതെ, അത്തരം ലൈബ്രറികൾ നിങ്ങളുടെ ഡെവലപ്‌മെൻ്റ് വർക്ക്ഫ്ലോയിലേക്ക് സംയോജിപ്പിക്കുന്നത് സമയം ലാഭിക്കാനും വിവിധ പ്രോജക്‌ടുകളിലുടനീളം JSON ഫോർമാറ്റിംഗിൽ സ്ഥിരത ഉറപ്പാക്കാനും കഴിയും.

എന്താണ് പ്രെറ്റി പ്രിൻ്റിംഗ് JSON?
പ്രെറ്റി-പ്രിൻ്റിംഗ് JSON എന്നത് മനുഷ്യർക്ക് കൂടുതൽ വായിക്കാൻ കഴിയുന്ന തരത്തിൽ ഇൻഡൻ്റേഷനും വൈറ്റ്‌സ്‌പേസും ഉപയോഗിച്ച് JSON ഡാറ്റ ഫോർമാറ്റ് ചെയ്യുന്നതിനെ സൂചിപ്പിക്കുന്നു.
JSON ഫോർമാറ്റിംഗ് പ്രധാനമായിരിക്കുന്നത് എന്തുകൊണ്ട്?
ശരിയായ JSON ഫോർമാറ്റിംഗ് വായനാക്ഷമത മെച്ചപ്പെടുത്തുകയും ഡാറ്റയുടെ ഘടനയും ഉള്ളടക്കവും വേഗത്തിൽ മനസ്സിലാക്കാൻ ഡവലപ്പർമാരെ സഹായിക്കുകയും ചെയ്യുന്നു.
എന്താണ് രീതി?
ദി രീതി ഒരു JavaScript ഒബ്‌ജക്റ്റിനെ JSON സ്ട്രിംഗാക്കി മാറ്റുന്നു.
എങ്ങിനെയാണ് ഭംഗിയായി അച്ചടിക്കാൻ സഹായിക്കണോ?
കടന്നുപോകുന്നതിലൂടെ മൂന്നാമത്തെ ആർഗ്യുമെൻ്റ് (ഇൻഡൻ്റേഷൻ ലെവൽ), നിങ്ങൾക്ക് ഇൻഡൻ്റേഷൻ ഉപയോഗിച്ച് JSON സ്ട്രിംഗ് ഫോർമാറ്റ് ചെയ്യാൻ കഴിയും.
എന്താണ് Highlight.js?
Highlight.js എന്നത് JSON ഡാറ്റ ഫോർമാറ്റ് ചെയ്യാനും ഹൈലൈറ്റ് ചെയ്യാനും ഉപയോഗിക്കാവുന്ന വാക്യഘടന ഹൈലൈറ്റിംഗിനുള്ള ഒരു ലൈബ്രറിയാണ്.
JSON ഫോർമാറ്റ് ചെയ്യാൻ എനിക്ക് ബ്രൗസർ എക്സ്റ്റൻഷനുകൾ ഉപയോഗിക്കാമോ?
അതെ, JSONView അല്ലെങ്കിൽ JSON ഫോർമാറ്റർ പോലുള്ള വിപുലീകരണങ്ങൾക്ക് നിങ്ങളുടെ ബ്രൗസറിൽ JSON സ്വയമേ ഫോർമാറ്റ് ചെയ്യാൻ കഴിയും.
എന്താണ് ഉദ്ദേശ്യം JSON ഫോർമാറ്റിംഗിലെ രീതി?
ദി വ്യത്യസ്‌ത JSON ഘടകങ്ങളിലേക്ക് കളർ കോഡിംഗ് ചേർക്കുന്നതിന് ഒരു സാധാരണ എക്‌സ്‌പ്രഷനോടുകൂടിയ രീതി ഉപയോഗിക്കാം.
JSON പ്രെറ്റി-പ്രിൻ്റിംഗിനുള്ള ഒരു സാധാരണ ഉപയോഗ കേസ് എന്താണ്?
ഡീബഗ്ഗ് ചെയ്യുമ്പോഴോ സാങ്കേതികമല്ലാത്ത പങ്കാളികൾക്ക് JSON ഡാറ്റ അവതരിപ്പിക്കുമ്പോഴോ പ്രെറ്റി-പ്രിൻ്റിംഗ് JSON സാധാരണയായി ഉപയോഗിക്കുന്നു.
Node.js-ൽ JSON എങ്ങനെ പ്രെറ്റി പ്രിൻ്റ് ചെയ്യാം?
Node.js-ൽ നിങ്ങൾക്ക് ഒരു HTTP സെർവർ സൃഷ്‌ടിച്ച് ഉപയോഗിക്കാം JSON പ്രതികരണങ്ങൾ ഫോർമാറ്റ് ചെയ്യാൻ.

ഡാറ്റയുടെ വായനാക്ഷമതയും ഉപയോഗക്ഷമതയും മെച്ചപ്പെടുത്തുന്നതിന് പ്രെറ്റി പ്രിൻ്റിംഗ് JSON അത്യാവശ്യമാണ്. JavaScript ഉപയോഗിച്ച്, JSON-നെ കൂടുതൽ മനുഷ്യസൗഹൃദമാക്കാൻ ഡെവലപ്പർമാർക്ക് ഇൻഡൻ്റേഷൻ, വൈറ്റ്‌സ്‌പേസ്, കളർ കോഡിംഗ് എന്നിവ പ്രയോഗിക്കാൻ കഴിയും. കൂടാതെ, ബ്രൗസർ എക്സ്റ്റൻഷനുകളും സിൻ്റാക്സ് ഹൈലൈറ്റിംഗ് ലൈബ്രറികളും പ്രയോജനപ്പെടുത്തുന്നത് ഫോർമാറ്റിംഗ് കൂടുതൽ മെച്ചപ്പെടുത്താൻ കഴിയും. JSON ഡാറ്റയുടെ മികച്ച ഡീബഗ്ഗിംഗിനും അവതരണത്തിനും ഈ സാങ്കേതിക വിദ്യകൾ കൂട്ടായി സഹായിക്കുന്നു, ഡാറ്റ കൈകാര്യം ചെയ്യുന്നതിൽ വ്യക്തതയും കാര്യക്ഷമതയും ഉറപ്പാക്കുന്നു.

JavaScript-ൽ ഹ്യൂമൻ റീഡബിലിറ്റിക്കായി JSON ഫോർമാറ്റ് ചെയ്യുന്നു

JSON ഫോർമാറ്റിംഗ് സ്ക്രിപ്റ്റുകളുടെ വിശദമായ വിശദീകരണം

മികച്ച വായനാക്ഷമതയ്ക്കായി JSON ഫോർമാറ്റ് ചെയ്യാൻ JavaScript ഉപയോഗിക്കുന്നു

പ്രെറ്റി-പ്രിൻ്റ് JSON-ലേക്കുള്ള ബാക്കെൻഡ് സമീപനം

അധിക ഉപകരണങ്ങൾ ഉപയോഗിച്ച് JSON വായനാക്ഷമത വർദ്ധിപ്പിക്കുന്നു