จัดรูปแบบและจัดรูปแบบข้อความในคอนโซล

Jecelyn Yeen

คู่มือนี้จะแสดงวิธีจัดรูปแบบและจัดสไตล์ข้อความในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ดูวิธีบันทึกข้อความลงในคอนโซลได้ที่เริ่มต้นใช้งานการบันทึกข้อความ

คู่มือนี้ถือว่าคุณเข้าใจพื้นฐานของการพัฒนาเว็บ เช่น วิธีใช้ JavaScript เพื่อเพิ่มความโต้ตอบในหน้าเว็บ

จัดรูปแบบข้อความคอนโซล

คุณสามารถใช้ตัวระบุรูปแบบเพื่อจัดรูปแบบข้อความคอนโซลได้

ตัวระบุรูปแบบจะขึ้นต้นด้วยอักขระเปอร์เซ็นต์ (%) และลงท้ายด้วย "อักขระประเภท" ซึ่งระบุประเภทข้อมูล (จำนวนเต็ม ทศนิยม ฯลฯ)

ตัวอย่างเช่น

1. เปิดคอนโซล

2. ป้อนคำสั่งคอนโซลต่อไปนี้

   const tools = 'Chrome DevTools';
   console.warn('%s is awesome.', tools);
   

3. คำสั่งข้างต้นจะสร้างข้อความ Chrome DevTools is awesome.

ต่อไปนี้คือรายการตัวระบุรูปแบบที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับในปัจจุบัน

ใช้ตัวระบุรูปแบบหลายรายการ

คุณใช้ตัวระบุรูปแบบได้มากกว่า 1 รายการในข้อความ

1. ป้อนคำสั่งคอนโซลต่อไปนี้

   console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
   

2. คำสั่งข้างต้นจะสร้างข้อความ The total weight of 3 apples and 2 oranges is 432.4 grams.

ทําความเข้าใจการเปลี่ยนประเภท

ระบบจะแปลงข้อความเอาต์พุตตามตัวระบุรูปแบบ

1. ป้อนคำสั่งคอนโซลต่อไปนี้

   console.log('I have %i apples and %d oranges.', 2, 3.5); 
   

2. คำสั่งข้างต้นจะสร้างข้อความ I have 2 apples and 3 oranges.

3. เอาต์พุตคือ 3 oranges แทนการบันทึก 3.5 oranges %d บ่งบอกว่าค่าควร/จะได้รับการแปลงเป็นจํานวนเต็ม

ต่อไปนี้คือตัวอย่างสิ่งที่จะเกิดขึ้นหากการเปลี่ยนประเภทไม่ถูกต้อง

1. ป้อนคำสั่งคอนโซลต่อไปนี้

   console.log('Jane has %i kiwis.', 'two');
   

2. คำสั่งข้างต้นจะสร้างข้อความ Jane has NaN kiwis.

3. %i บ่งบอกว่าค่าควร/จะได้รับการแปลงเป็นจำนวนเต็ม แต่อาร์กิวเมนต์เป็นสตริง ดังนั้นจึงแสดงผลเป็น NaN (Not-A-Number)

จัดรูปแบบข้อความในคอนโซล

การจัดรูปแบบข้อความในคอนโซลในเครื่องมือสำหรับนักพัฒนาเว็บทำได้ 2 วิธี

รูปแบบที่มีตัวระบุรูปแบบ

คุณสามารถใช้ตัวระบุรูปแบบ %c เพื่อจัดรูปแบบข้อความคอนโซลด้วย CSS

1. ป้อนคำสั่งคอนโซลต่อไปนี้

   const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
   console.log("%cHooray", style);
   

2. คำสั่งข้างต้นจะสร้าง Hooray ที่มีการใช้รูปแบบ CSS

รูปแบบที่มีลำดับหลีก ANSI

คุณสามารถใช้ชุดค่าผสมการหนี ANSI เพื่อจัดรูปแบบข้อความคอนโซลได้

นักพัฒนาซอฟต์แวร์ Node.js มักใช้สีในข้อความบันทึกผ่านชุดคำสั่ง ANSI โดยมักใช้ไลบรารีการจัดรูปแบบบางอย่าง เช่น chalk, colors, ansi-colors, kleur

อย่างไรก็ตาม คุณสามารถจัดรูปแบบข้อความด้วยซีเควนซ์การหนี ANSI ได้โดยไม่ต้องใช้ไลบรารีใดๆ ไวยากรณ์มีดังนี้

\x1B[𝘗1;…;𝘗nm

ที่ไหน

• 𝘗1 ถึง 𝘗n คือลําดับย่อยที่ถูกต้องของพารามิเตอร์ SGR (Select Graphic Rendition)
• คุณละเว้นพารามิเตอร์ 𝘗1 ถึง 𝘗n ใดก็ได้ ซึ่งในกรณีนี้ ระบบจะถือว่าค่าของพารามิเตอร์นั้นเท่ากับ 0
• \x1B[m คือทางลัดของ \x1B[0m ซึ่งระบบจะรีเซ็ตแอตทริบิวต์การแสดงผล

ตัวอย่างเช่น

1. ป้อนคำสั่งคอนโซลต่อไปนี้

   console.log('\x1B[41;93;4mHello\x1B[m');
   

2. คำสั่งข้างต้นจะสร้างข้อความ Hello ที่มีพื้นหลังสีแดง ข้อความสีเหลือง และขีดเส้นใต้

ต่อไปนี้คือรายการรหัสสีที่เครื่องมือสำหรับนักพัฒนาเว็บรองรับ

ต่อไปนี้เป็นรายการโค้ดการจัดรูปแบบที่เครื่องมือสำหรับนักพัฒนาเว็บรองรับ

ตัวอย่างที่ซับซ้อนขึ้นอีกแบบหนึ่งที่มีการจัดรูปแบบหลายรูปแบบ

1. ป้อนคำสั่งคอนโซลต่อไปนี้

   const hello = '\x1B[41;93;4mHello';
   const space = '\x1B[m ';
   const world = '\x1B[34;102;9mWorld';
   
   console.log(hello + space + world);
   

2. คำสั่งข้างต้นจะสร้างข้อความ Hello World ที่มี 3 รูปแบบที่แตกต่างกัน