0Pricing
JavaScript Academy · درس

متغيرات البيئة وأنماط الإعداد

اضبطوا التطبيقات باستخدام قيم افتراضية صغيرة وقراءات آمنة لمتغيرات البيئة وكائنات صريحة. وتجنبوا تسريب الأسرار في المتصفح. أنماط ملائمة للمبتدئين

متغيرات البيئة وأنماط الإعداد درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

الصورة العامة

الهدف: قراءة الإعدادات بأمان في أي بيئة تشغيل.

  • ابدأ بالقيم الافتراضية
  • تحقّق من ميزات البيئة، ولا تفترض وجود process.env
  • حلّل السلاسل النصية إلى أرقام وقيم منطقية
  • لا تضع أسرارًا في حزم المتصفح
متغيرات البيئة وأنماط الإعداد — رسم توضيحي 1

قراءة البيئة بأمان

استخدم اكتشاف الميزات لقراءة متغيرات البيئة عند وجودها فقط. وقدّم مخزنًا تجريبيًا صغيرًا للأمثلة القابلة للتشغيل.

// Read an env var if available; otherwise use a fallback
function readEnv(name, fallback) {
  // detect Node-like env
  const hasProcessEnv = typeof process !== "undefined" && process && process.env && typeof process.env === "object";
  if (hasProcessEnv && typeof process.env[name] === "string") {
    return process.env[name];
  }
  // demo fallback store so this snippet runs everywhere
  const DEMO = { API_URL: "https://api.example.com", NODE_ENV: "development" };
  if (typeof DEMO[name] === "string") return DEMO[name];
  return fallback;
}

console.log("API_URL:", readEnv("API_URL", "https://fallback.local"));
متغيرات البيئة وأنماط الإعداد — رسم توضيحي 2

الإعدادات من القيم الافتراضية والبيئة

ابدأ بالقيم الافتراضية، ثم استبدلها بالقيم القادمة من البيئة. حوّل السلاسل النصية إلى number/boolean صراحةً.

// Build config from defaults, then override via env when present
function buildConfig() {
  const defaults = {
    apiUrl: "https://api.example.com",
    port: 3000,
    debug: false
  };

  // env values are strings; parse to right types
  const apiUrl = readEnv("API_URL", defaults.apiUrl);
  const portStr = readEnv("PORT", String(defaults.port));
  const debugStr = readEnv("DEBUG", defaults.debug ? "1" : "0");

  return {
    apiUrl: apiUrl,
    port: Number.parseInt(portStr, 10),
    debug: debugStr === "1" || debugStr === "true"
  };
}

const cfg = buildConfig();
console.log("config:", cfg);
متغيرات البيئة وأنماط الإعداد — رسم توضيحي 3

مَعلمة إعدادات صريحة

مرّر كائن إعدادات صغيرًا إلى الدوال. فهذا يتجنّب الحالة العامة والمفاجآت.

// Pass config into functions explicitly (easier to test)
function startApp(config) {
  // use values directly
  const mode = config.debug ? "debug" : "prod";
  return "Starting " + mode + " at " + config.apiUrl + " on :" + config.port;
}

console.log(startApp(cfg));
متغيرات البيئة وأنماط الإعداد — رسم توضيحي 4

تحليل متغيرات البيئة بأمان

قيم البيئة هي سلاسل نصية. اكتب محلّلات صغيرة للقيم المنطقية والأعداد الصحيحة لتجنّب الأخطاء.

// Helpers to parse common env shapes safely
function toBool(s, fallback) {
  if (typeof s !== "string") return fallback;
  const v = s.trim().toLowerCase();
  if (v === "1" || v === "true" || v === "yes") return true;
  if (v === "0" || v === "false" || v === "no") return false;
  return fallback;
}

function toInt(s, fallback) {
  const n = Number.parseInt(s, 10);
  return Number.isFinite(n) ? n : fallback;
}

console.log("toBool:", toBool("yes", false), toBool("no", true));
console.log("toInt :", toInt("8080", 3000), toInt("oops", 3000));
متغيرات البيئة وأنماط الإعداد — رسم توضيحي 5

الأسرار وشيفرة العميل

مهم:

  • لا تضع الأسرار في JavaScript من جهة العميل؛ إذ يستطيع المستخدمون قراءتها.
  • احتفظ في المتصفح بالخيارات وعناوين URL غير الحساسة فقط.
  • في Node، اقرأ الأسرار الحقيقية من process.env أو من خزنة.
  • احتفظ دائمًا بـ إعدادات افتراضية للتشغيل المحلي.
متغيرات البيئة وأنماط الإعداد — رسم توضيحي 6

اختبار أساسيات البيئة والإعدادات

تحقّق سريع: نمط إعدادات قابل للنقل.

متغيرات البيئة وأنماط الإعداد — رسم توضيحي 7

مراجعة

مراجعة: أنشئ الإعدادات من القيم الافتراضية وقراءات البيئة الآمنة، وحلّل السلاسل النصية، ومرّر كائن إعدادات صريحًا. لا تشحن الأسرار أبدًا ضمن شيفرة العميل.

متغيرات البيئة وأنماط الإعداد — رسم توضيحي 8

الأسئلة الشائعة

هل درس «متغيرات البيئة وأنماط الإعداد» مجاني؟

نعم — نص درس «متغيرات البيئة وأنماط الإعداد» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

ماذا ستتعلم في «متغيرات البيئة وأنماط الإعداد»؟

اضبطوا التطبيقات باستخدام قيم افتراضية صغيرة وقراءات آمنة لمتغيرات البيئة وكائنات صريحة. وتجنبوا تسريب الأسرار في المتصفح. أنماط ملائمة للمبتدئين تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «متغيرات البيئة وأنماط الإعداد»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. النطاقات العامة وتوفر fetch وواجهات الملفات والشبكة
  2. مراوغات محمّل ESM والفروق بين المسارات وعناوين URL
  3. متغيرات البيئة وأنماط الإعداد
← العودة إلى JavaScript Academy