İçeriğe geç
Toova
Tüm Araçlar

JavaScript'te JSON Nasıl Biçimlendirilir — 5 Yöntem

Toova

JSON her yerdedir: API yanıtları, yapılandırma dosyaları, veritabanı dışa aktarımları, log hatları. Ancak ham JSON çıktısı genellikle kompakt bir kütledir — satır sonu yok, girinti yok, anahtarlar serileştiricinin onları çıkardığı sırada. Bu, hata ayıklamayı acılı ve işbirliğini gerekenden daha zor hale getirir.

JavaScript size JSON'u biçimlendirmenin birkaç yolunu sunar, yerleşik JSON.stringify'dan belleğe yüklenmesi çok büyük olan dosyalar için streaming kütüphanelerine kadar. Bu kılavuz, en yaygın durumları ve geliştiricileri gafil avlayan uç durumları kapsayan beş pratik yöntemi adım adım anlatır.

Yöntem 1: Girinti ile JSON.stringify

En basit yaklaşım zaten dile yerleşiktir. JSON.stringify üç argüman kabul eder: seri hale getirilecek değer, bir replacer (Yöntem 2'de daha fazlası) ve girintiyi kontrol eden bir space parametresi. 

const data = {
  name: "Alice",
  role: "engineer",
  skills: ["JavaScript", "TypeScript", "Node.js"],
  active: true,
};

// 2 boşluk girinti (yaygın varsayılan)
console.log(JSON.stringify(data, null, 2));

// 4 boşluk girinti
console.log(JSON.stringify(data, null, 4));

// Sekme girinti
console.log(JSON.stringify(data, null, "\t"));

null, 2 ile, çıktı şuna benzer: 

{
  "name": "Alice",
  "role": "engineer",
  "skills": [
    "JavaScript",
    "TypeScript",
    "Node.js"
  ],
  "active": true
}

İki boşluk, JavaScript projelerinde en yaygın kuraldır — ESLint, Prettier ve çoğu stil kılavuzundaki varsayılana uyar. Dört boşluk, Python'a komşu araçlarda yaygındır. space çıkarıldığında veya 0 olarak ayarlandığında, çıktı kompakt tek satırlı bir dizgidir — kablo iletimi için idealdir.

Tarayıcıda JSON'u anında biçimlendirmek için ayrıca JSON Formatter aracını kullanabilirsiniz — ham JSON yapıştırın, güzel yazdırılmış çıktı alın ve sonucu kod yazmadan kopyalayın.

Yöntem 2: Özel Replacer Fonksiyonu

JSON.stringify'a ikinci argüman — replacer — seri hale getirmeden önce değerleri filtreleyen ve dönüştüren bir fonksiyon veya dizidir. Çıktıda nelerin bulunacağı üzerinde gerçek kontrolü burada elde edersiniz.

Dizi formu, anahtar beyaz listeleme için en basit yaklaşımdır: 

const user = {
  id: 42,
  name: "Bob",
  password: "s3cr3t",
  email: "bob@example.com",
  createdAt: new Date(),
};

// Dizi replacer: yalnızca listelenen anahtarları dahil et
const safeJson = JSON.stringify(user, ["id", "name", "email"], 2);
console.log(safeJson);
// {
//   "id": 42,
//   "name": "Bob",
//   "email": "bob@example.com"
// }

Fonksiyon formu size değer başına kontrol sağlar. Dahil etmek için değeri döndürün, düşürmek için undefined döndürün veya dönüştürülmüş bir değer döndürün: 

function replacer(key, value) {
  // Alt çizgi ile başlayan anahtarları düşür (özel kural)
  if (key.startsWith("_")) return undefined;

  // Hassas alanları maskele
  if (key === "password" || key === "token") return "[REDACTED]";

  // Date nesnelerini açıkça ISO dizgilerine dönüştür
  if (value instanceof Date) return value.toISOString();

  return value;
}

const payload = {
  id: 1,
  name: "Carol",
  password: "hunter2",
  _internalFlag: true,
  lastLogin: new Date("2026-05-01"),
};

console.log(JSON.stringify(payload, replacer, 2));
// {
//   "id": 1,
//   "name": "Carol",
//   "password": "[REDACTED]",
//   "lastLogin": "2026-05-01T00:00:00.000Z"
// }

Replacer her iç içe nesne ve dizide özyinelemeli olarak çalışır. Bu desen, kimlik bilgilerini diske yazmadan veya bir gözlemlenebilirlik servisine göndermeden önce sıyırmak istediğiniz loglama hatları için kullanışlıdır.

Yöntem 3: Sıralı Anahtarlarla Güzel Yazdırma

JavaScript nesneleri anahtar sırasını garanti etmez (ancak V8 ve çoğu motor dizgi anahtarları için ekleme sırasını korur). Deterministik çıktıya ihtiyacınız olduğunda — farklılaştırma, önbelleğe alma veya kanonik temsiller için — anahtarları alfabetik olarak sıralamak doğru harekettir. 

function sortedStringify(value, indent = 2) {
  return JSON.stringify(value, sortReplacer, indent);
}

function sortReplacer(key, value) {
  if (value !== null && typeof value === "object" && !Array.isArray(value)) {
    return Object.keys(value)
      .sort()
      .reduce((sorted, k) => {
        sorted[k] = value[k];
        return sorted;
      }, {});
  }
  return value;
}

const config = {
  version: "1.0",
  author: "Dave",
  dependencies: { typescript: "^5.4", eslint: "^9.0", astro: "^5.0" },
  name: "my-project",
};

console.log(sortedStringify(config));
// {
//   "author": "Dave",
//   "dependencies": { "astro": "^5.0", "eslint": "^9.0", "typescript": "^5.4" },
//   "name": "my-project",
//   "version": "1.0"
// }

Sıralı anahtarlar, git diff'lerinin farklı serileştiricilerden gelen rastgele yeniden sıralamalar yerine yalnızca gerçekten değişen satırları gösterdiği anlamına gelir. Bu, sürüm kontrolüne giren package.json ve benzeri yapılandırma dosyaları için özellikle yararlıdır.

JSON'u diğer formatlara dönüştürmek için, JSON to YAML aracı ve JSON to CSV aracı da çıktılarında anahtar sıralamasını ele alır.

Yöntem 4: Bir Dizgiden Biçimlendirme (Ayrıştırma + Stringify)

Gerçek dünya JSON'u genellikle bir dizgi olarak gelir — bir fetch yanıtından, bir dosya okumasından, bir pano yapıştırmasından veya bir veritabanı TEXT sütunundan. Önce ayrıştırmanız, ardından yeniden biçimlendirmeniz gerekir. Kritik kısım uygun hata işlemedir: geçersiz JSON fırlatır ve bunu zarif bir şekilde yakalamak istersiniz. 

function formatJsonString(rawString, indent = 2) {
  try {
    const parsed = JSON.parse(rawString);
    return { ok: true, result: JSON.stringify(parsed, null, indent) };
  } catch (err) {
    return { ok: false, error: err.message };
  }
}

const raw = '{"name":"Eve","scores":[100,95,88],"active":true}';
const { ok, result, error } = formatJsonString(raw);

if (ok) {
  console.log(result);
  // {
  //   "name": "Eve",
  //   "scores": [100, 95, 88],
  //   "active": true
  // }
} else {
  console.error("Ayrıştırma başarısız:", error);
}

// Geçersiz girdi
const bad = '{"name": "Eve", "broken":}';
const r2 = formatJsonString(bad);
// { ok: false, error: "Unexpected token '}'" }

Ayrıştırma hatalarını yapılandırılmış bir dönüş nesnesine sarmak, bu fonksiyonu UI bileşenlerinde ve derleme betiklerinde her çağrı yerini try/catch ile çevrelemeden güvenli bir şekilde kullanılabilir hale getirir. JSON.stringify için MDN belgeleri tam parametre şartnamesini kapsar ve RFC 8259, protokol düzeyinde geçerli JSON'un nasıl göründüğünü tanımlar.

Yöntem 5: Büyük Dosyalar İçin Streaming

Yöntem 1–4 hepsi biçimlendirmeden önce tüm JSON yapısını belleğe yükler. Yüzlerce megabayt veya çoklu gigabayt aralığındaki dosyalar için, bu Node.js olay döngüsünü engeller ve süreci tamamen çökerebilir.

Streaming yaklaşımı dosyayı parçalar halinde okur ve biçimlendirilmiş çıktıyı kademeli olarak yazar. NDJSON için (satır başına bir JSON nesnesi, log dosyalarında ve veritabanı dışa aktarımlarında yaygın), readline tabanlı bir yaklaşım ek bağımlılıklar olmadan çalışır: 

import { createReadStream, createWriteStream } from "node:fs";
import { createInterface } from "node:readline";

async function formatNdjsonFile(inputPath, outputPath) {
  const rl = createInterface({
    input: createReadStream(inputPath),
    crlfDelay: Infinity,
  });

  const output = createWriteStream(outputPath);

  for await (const line of rl) {
    if (!line.trim()) continue;
    try {
      const obj = JSON.parse(line);
      output.write(JSON.stringify(obj, null, 2) + "\n---\n");
    } catch (e) {
      output.write("[Geçersiz JSON satırı: " + e.message + "]\n---\n");
    }
  }

  output.end();
}

NDJSON, en basit streaming formatıdır: her satır geçerli, tam bir JSON nesnesidir. Birçok dışa aktarma aracı, tam olarak önemsiz şekilde streaming yapılabildiği için bunu destekler. Büyük veri dışa aktarımlarının formatını kontrol ediyorsanız, tek bir devasa JSON dizisi yerine NDJSON'u tercih edin.

Dikkat Edilmesi Gereken Uç Durumlar

Bunlar standart JSON biçimlendirmesinin sessizce başarısız olduğu veya beklenmedik şekilde fırlattığı senaryolardır.

Dairesel Başvurular

JSON.stringify, bir nesne kendisine doğrudan veya dolaylı olarak başvuruyorsa bir TypeError fırlatır. Ziyaret edilen nesneleri bir WeakSet kullanarak izleyen bir replacer ile düzeltin: 

function safeStringify(obj, indent = 2) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) return "[Circular]";
      seen.add(value);
    }
    return value;
  }, indent);
}

const a = { name: "circular" };
a.self = a;
console.log(safeStringify(a));
// { "name": "circular", "self": "[Circular]" }

WeakSet, çöp toplamayı engellemeden başvuruları tutar, bu da uzun süre çalışan süreçlerde bellek sızıntılarından kaçınır.

BigInt Değerleri

JSON şartnamesinin 64 bit tamsayı türü olmadığı için JSON.stringify BigInt değerleri için bir TypeError fırlatır. Replacer'ınızda dizgiye dönüştürün: 

const data = { id: 9007199254740993n, value: 42 };

JSON.stringify(data, (key, value) =>
  typeof value === "bigint" ? value.toString() : value
, 2);
// { "id": "9007199254740993", "value": 42 }

Map ve Set Değerleri

Map boş bir nesne olarak seri hale gelir ve Set boş bir dizi olarak seri hale gelir — içerikleri olarak değil. Bunları bir replacer'da açıkça dönüştürün: 

const data = {
  tags: new Set(["json", "javascript"]),
  meta: new Map([["source", "api"]]),
};

JSON.stringify(data, (key, value) => {
  if (value instanceof Set) return [...value];
  if (value instanceof Map) return Object.fromEntries(value);
  return value;
}, 2);
// { "tags": ["json", "javascript"], "meta": { "source": "api" } }

undefined Değerleri

undefined değerli nesne özellikleri sessizce düşürülür. undefined olan dizi yuvaları null olur. Tüm anahtarları korumanız gerektiğinde undefined'i null'a dönüştürmek için bir replacer kullanın: 

const obj = { a: 1, b: undefined, c: null };
JSON.stringify(obj, null, 2);
// { "a": 1, "c": null }  — "b" sessizce düşürülür

// Düzeltme:
JSON.stringify(obj, (key, value) =>
  value === undefined ? null : value
, 2);
// { "a": 1, "b": null, "c": null }

Tarayıcıda Anında JSON Biçimlendirin

Kod yazmadan şimdi bir JSON kütlesini biçimlendirmeniz gerekiyorsa, Toova JSON Formatter bunu tek tıklamayla ele alır — ham JSON yapıştırın, 2 veya 4 boşluk girintisiyle güzel yazdırılmış çıktı alın ve sonucu kopyalayın. Kayıt yok, dosya yüklemesi yok, her şey tarayıcınızda yerel olarak çalışır.

Formatlar arası dönüşümler için, JSON to YAML ve JSON to CSV aynı gizlilik öncelikli yaklaşımı izler — verileriniz cihazınızdan asla çıkmaz.

Sonuç

Çoğu kullanım senaryosu için, ihtiyacınız olan tek şey JSON.stringify(obj, null, 2)'dir. Filtreleme, maskeleme veya sıralı anahtarlara ihtiyacınız olduğunda bir replacer fonksiyonu ekleyin. Harici girdiyi ele alırken JSON.parse'i bir try/catch'e sarın. Yalnızca dosya boyutu eş zamanlı ayrıştırmayı pratik olmaktan çıkardığında streaming'e başvurun. Ve sıra dışı veri şekilleriyle çalışırken uç durumları — dairesel başvurular, BigInt, Map/Set, undefined — aklınızın bir köşesinde tutun.