0Pricing
JavaScript Academy · บทเรียน

ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า

ตั้งค่าแอปด้วยค่าเริ่มต้นขนาดเล็ก การอ่านสภาพแวดล้อมอย่างปลอดภัย และออบเจ็กต์ที่ระบุชัดเจน หลีกเลี่ยงการรั่วไหลของความลับในเบราว์เซอร์ด้วยรูปแบบที่เหมาะกับผู้เริ่มต้น

ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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

การตั้งค่าจากค่าเริ่มต้นและสภาพแวดล้อม

ใช้ค่าเริ่มต้นก่อน แล้วจึงแทนที่ค่าจากสภาพแวดล้อม แปลงสตริงเป็นตัวเลข/ค่าบูลีนอย่างชัดเจน

// 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

ข้อมูลลับและโค้ดฝั่งไคลเอนต์

สำคัญ:

  • อย่าใส่ข้อมูลลับใน JS ฝั่งไคลเอนต์ เพราะผู้ใช้สามารถอ่านได้
  • เก็บไว้ในเบราว์เซอร์เฉพาะแฟล็กหรือ URL ที่ไม่เป็นความลับ
  • ใน Node ให้อ่านข้อมูลลับจริงจาก process.env หรือคลังเก็บข้อมูลลับ
  • เก็บการตั้งค่าเริ่มต้นไว้สำหรับการรันในเครื่องเสมอ
ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า — ภาพประกอบ 6

แบบทดสอบพื้นฐานสภาพแวดล้อมและการตั้งค่า

ตรวจสอบอย่างรวดเร็ว: รูปแบบการตั้งค่าที่พกพาได้

ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า — ภาพประกอบ 7

ทบทวน

ทบทวน: สร้างการตั้งค่าจาก defaults และการอ่านสภาพแวดล้อมอย่างปลอดภัย parse สตริง และส่งออบเจ็กต์การตั้งค่าที่ระบุชัดเจน อย่านำข้อมูลลับไปใส่ในโค้ดฝั่งไคลเอนต์

ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า — ภาพประกอบ 8

คำถามที่พบบ่อย

บทเรียน “ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า”

ตั้งค่าแอปด้วยค่าเริ่มต้นขนาดเล็ก การอ่านสภาพแวดล้อมอย่างปลอดภัย และออบเจ็กต์ที่ระบุชัดเจน หลีกเลี่ยงการรั่วไหลของความลับในเบราว์เซอร์ด้วยรูปแบบที่เหมาะกับผู้เริ่มต้น คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. โกลบอล ความพร้อมใช้งานของ fetch และ API ไฟล์หรือเครือข่าย
  2. ข้อแปลกของตัวโหลด ESM และความแตกต่างของ path/URL
  3. ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า
← กลับไปที่ JavaScript Academy