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

อ่านสภาพแวดล้อมอย่างปลอดภัย
ใช้การตรวจสอบความสามารถเพื่ออ่านตัวแปรสภาพแวดล้อมเฉพาะเมื่อมีอยู่เท่านั้น จัดเตรียมที่เก็บข้อมูลสาธิตขนาดเล็กสำหรับตัวอย่างที่รันได้
// 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"));

การตั้งค่าจากค่าเริ่มต้นและสภาพแวดล้อม
ใช้ค่าเริ่มต้นก่อน แล้วจึงแทนที่ค่าจากสภาพแวดล้อม แปลงสตริงเป็นตัวเลข/ค่าบูลีนอย่างชัดเจน
// 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);

พารามิเตอร์การตั้งค่าที่ระบุชัดเจน
ส่งออบเจ็กต์การตั้งค่าขนาดเล็กให้ฟังก์ชัน วิธีนี้หลีกเลี่ยงสถานะส่วนกลางและความประหลาดใจที่ไม่คาดคิด
// 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));

แยกวิเคราะห์สภาพแวดล้อมอย่างปลอดภัย
ค่าจากสภาพแวดล้อมเป็นสตริง ให้เขียนตัวแยกวิเคราะห์ขนาดเล็กสำหรับค่าบูลีนและจำนวนเต็มเพื่อหลีกเลี่ยงข้อผิดพลาด
// 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));

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

แบบทดสอบพื้นฐานสภาพแวดล้อมและการตั้งค่า
ตรวจสอบอย่างรวดเร็ว: รูปแบบการตั้งค่าที่พกพาได้

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

คำถามที่พบบ่อย
บทเรียน “ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โกลบอล ความพร้อมใช้งานของ fetch และ API ไฟล์หรือเครือข่าย
- ข้อแปลกของตัวโหลด ESM และความแตกต่างของ path/URL
- ตัวแปรสภาพแวดล้อมและรูปแบบการตั้งค่า