دليل شامل لمحسن JSON

# دليل شامل لمحسن JSON

محسن JSON (JSON Beautifier) يحول JSON المضغوط إلى تنسيق منظم وسهل القراءة.

ما هو محسن JSON؟

التعريف

محسن JSON هو أداة تأخذ JSON مضغوطاً أو غير منسق وتحوله إلى تنسيق منظم مع مسافات بادئة مناسبة.

قبل وبعد

// قبل التحسين
{"الاسم":"أحمد","العمر":30,"العنوان":{"المدينة":"الرياض","الرمز":"12345"},"المهارات":["JavaScript","Python"]}

// بعد التحسين
{
  "الاسم": "أحمد",
  "العمر": 30,
  "العنوان": {
    "المدينة": "الرياض",
    "الرمز": "12345"
  },
  "المهارات": [
    "JavaScript",
    "Python"
  ]
}

لماذا تستخدم محسن JSON؟

الفوائد الرئيسية

قابلية القراءة

- سهولة فهم البنية

- رؤية واضحة للتسلسل الهرمي

- تمييز الأخطاء بسرعة

التصحيح

- العثور على الأخطاء بسهولة

- فهم البيانات المعقدة

- مقارنة الملفات

الصيانة

- تحديث البيانات بسهولة

- إضافة حقول جديدة

- إعادة الهيكلة

التعاون

- مشاركة كود واضح

- مراجعة الكود

- توثيق أفضل

أنواع محسنات JSON

1. محسنات عبر الإنترنت

JSON Formatter & Validator

الميزات:

• تنسيق فوري
• التحقق من الصحة
• إبراز بناء الجملة
• مجاني تماماً

الاستخدام:

1. الصق JSON الخاص بك
اضغط على "Format"
انسخ النتيجة

JSONLint

الميزات:

• تحقق وتنسيق
• رسائل خطأ واضحة
• واجهة بسيطة
• مفتوح المصدر

Code Beautify

الميزات:

• محسن قوي
• خيارات متعددة
• تصدير النتائج
• API متاح

2. ملحقات المتصفح

JSON Formatter (Chrome)

- عرض تلقائي للـ JSON
طي/فتح العقد
بحث في البيانات
نسخ المسارات

JSONView (Firefox)

- تنسيق تلقائي
عرض شجري
إبراز الألوان
تصدير

3. محررات الكود

VS Code

// الإعدادات
{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

اختصارات:

• Windows/Linux: Shift + Alt + F
• Mac: Shift + Option + F

Sublime Text

// حزمة Pretty JSON
Package Control > Install Package > Pretty JSON

// الاختصار
Ctrl + Alt + J

4. أدوات سطر الأوامر

jq

# تنسيق ملف
jq '.' input.json

# تنسيق مع حفظ
jq '.' input.json > output.json

# تنسيق مع ألوان
jq -C '.' input.json

# ضغط (عكس التحسين)
jq -c '.' input.json

Python

import json

# قراءة وتحسين
with open('input.json', 'r', encoding='utf-8') as f:
    data = json.load(f)

# حفظ منسق
with open('output.json', 'w', encoding='utf-8') as f:
    json.dump(data, f, indent=2, ensure_ascii=False)

Node.js

const fs = require('fs');

// قراءة JSON
const data = JSON.parse(
  fs.readFileSync('input.json', 'utf8')
);

// كتابة منسق
fs.writeFileSync(
  'output.json', 
  JSON.stringify(data, null, 2)
);

خيارات التنسيق

1. المسافة البادئة

مسافتين (موصى به)

{
  "المستخدم": {
    "الاسم": "أحمد"
  }
}

أربع مسافات

{
    "المستخدم": {
        "الاسم": "أحمد"
    }
}

Tab

{
	"المستخدم": {
		"الاسم": "أحمد"
	}
}

2. ترتيب المفاتيح

// بدون ترتيب
const بيانات = {
  العمر: 30,
  الاسم: "أحمد",
  id: 1
};

// مع الترتيب
const منسق = JSON.stringify(
  بيانات, 
  Object.keys(بيانات).sort(),
  2
);

// النتيجة
{
  "العمر": 30,
  "الاسم": "أحمد",
  "id": 1
}

3. معالجة المصفوفات

مصفوفات في سطر واحد

{
  "الألوان": ["أحمر", "أزرق", "أخضر"]
}

مصفوفات متعددة الأسطر

{
  "الألوان": [
    "أحمر",
    "أزرق",
    "أخضر"
  ]
}

استخدام محسن JSON برمجياً

JavaScript

// وظيفة تحسين بسيطة
function beautifyJSON(json, indent = 2) {
  try {
    const parsed = typeof json === 'string' 
      ? JSON.parse(json) 
      : json;
    return JSON.stringify(parsed, null, indent);
  } catch (error) {
    return 'خطأ: JSON غير صالح';
  }
}

// الاستخدام
const json = '{"الاسم":"أحمد","العمر":30}';
console.log(beautifyJSON(json));

TypeScript

interface BeautifyOptions {
  indent?: number;
  sortKeys?: boolean;
  ensureAscii?: boolean;
}

function beautifyJSON(
  json: string | object, 
  options: BeautifyOptions = {}
): string {
  const {
    indent = 2,
    sortKeys = false,
    ensureAscii = false
  } = options;

  try {
    const parsed = typeof json === 'string' 
      ? JSON.parse(json) 
      : json;

    let replacer = null;
    if (sortKeys) {
      replacer = Object.keys(parsed).sort();
    }

    return JSON.stringify(parsed, replacer, indent);
  } catch (error) {
    throw new Error('JSON غير صالح');
  }
}

Python

import json

def beautify_json(json_string, indent=2, sort_keys=False):
    """تحسين JSON"""
    try:
        data = json.loads(json_string)
        return json.dumps(
            data,
            indent=indent,
            ensure_ascii=False,
            sort_keys=sort_keys
        )
    except json.JSONDecodeError as e:
        return f"خطأ: {str(e)}"

# الاستخدام
json_str = '{"الاسم":"أحمد","العمر":30}'
print(beautify_json(json_str))

PHP

<?php
function beautifyJSON($json, $indent = 2) {
    $data = json_decode($json);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return 'خطأ: JSON غير صالح';
    }

    return json_encode(
        $data,
        JSON_PRETTY_PRINT | 
        JSON_UNESCAPED_UNICODE |
        JSON_UNESCAPED_SLASHES
    );
}

// الاستخدام
$json = '{"الاسم":"أحمد","العمر":30}';
echo beautifyJSON($json);
?>

ميزات متقدمة

1. التحقق من الصحة مع التحسين

function validateAndBeautify(json) {
  try {
    const parsed = JSON.parse(json);
    return {
      valid: true,
      beautified: JSON.stringify(parsed, null, 2),
      error: null
    };
  } catch (error) {
    return {
      valid: false,
      beautified: null,
      error: error.message
    };
  }
}

// الاستخدام
const result = validateAndBeautify('{"الاسم":"أحمد"}');
if (result.valid) {
  console.log(result.beautified);
} else {
  console.error('خطأ:', result.error);
}

2. تحسين مع تحليل

function beautifyWithStats(json) {
  const parsed = JSON.parse(json);
  const beautified = JSON.stringify(parsed, null, 2);

  return {
    beautified,
    stats: {
      originalSize: json.length,
      beautifiedSize: beautified.length,
      difference: beautified.length - json.length,
      ratio: (beautified.length / json.length).toFixed(2)
    }
  };
}

// الاستخدام
const result = beautifyWithStats('{"الاسم":"أحمد"}');
console.log('الحجم الأصلي:', result.stats.originalSize);
console.log('الحجم بعد التحسين:', result.stats.beautifiedSize);

3. تحسين انتقائي

function selectiveBeautify(json, paths = []) {
  const parsed = JSON.parse(json);

  // تحسين فقط المسارات المحددة
  paths.forEach(path => {
    const value = getByPath(parsed, path);
    if (value && typeof value === 'object') {
      setByPath(
        parsed, 
        path, 
        JSON.parse(JSON.stringify(value, null, 2))
      );
    }
  });

  return JSON.stringify(parsed, null, 2);
}

أدوات محسن JSON الشهيرة

1. مكتبات JavaScript

prettier

npm install --save-dev prettier

# تنسيق ملف
prettier --write data.json

json-beautify

const beautify = require('json-beautify');

const data = {الاسم: 'أحمد', العمر: 30};
console.log(beautify(data, null, 2, 80));

2. مكتبات Python

json module (مدمج)

import json

# تحسين
json.dumps(data, indent=2, ensure_ascii=False)

ujson (أسرع)

import ujson

# تحسين
ujson.dumps(data, indent=2, ensure_ascii=False)

أفضل الممارسات

1. اختر المسافة البادئة المناسبة

• مسافتين: للملفات الصغيرة والمتوسطة
• أربع مسافات: للملفات الكبيرة والمعقدة

2. استخدم UTF-8

{
  "الرسالة": "مرحباً بالعالم",
  "اللغة": "العربية"
}

3. احفظ نسخة احتياطية

قبل تحسين الملفات الكبيرة، احفظ نسخة احتياطية.

4. استخدم التحسين التلقائي

قم بإعداد محررك للتنسيق التلقائي عند الحفظ.

حالات الاستخدام

1. تصحيح API Responses

fetch('https://api.example.com/users')
  .then(r => r.json())
  .then(data => {
    console.log(JSON.stringify(data, null, 2));
  });

2. مراجعة ملفات التكوين

{
  "app": {
    "name": "تطبيقي",
    "version": "1.0.0",
    "config": {
      "database": {
        "host": "localhost",
        "port": 5432
      }
    }
  }
}

3. توثيق البيانات

JSON المحسن أسهل للقراءة في التوثيق.

الأخطاء الشائعة

1. فاصلة في النهاية

// خطأ
{
  "الاسم": "أحمد",
}

// صحيح
{
  "الاسم": "أحمد"
}

2. علامات اقتباس غير صحيحة

// خطأ
{
  'الاسم': 'أحمد'
}

// صحيح
{
  "الاسم": "أحمد"
}

الملخص

محسن JSON يوفر:

• قابلية قراءة أفضل
• تصحيح أسهل
• صيانة محسنة
• تعاون أفضل

استخدم محسن JSON في سير عملك اليومي!