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

Jecelyn Yeen

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

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

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

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

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

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

1. เปิดคอนโซล
2. ป้อนคำสั่งคอนโซลต่อไปนี้ js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
3. คำสั่งด้านบนจะสร้างข้อความ Chrome DevTools is awesome.

รายการตัวระบุรูปแบบที่ Chrome DevTools รองรับในปัจจุบันมีดังนี้

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

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

1. ป้อนคำสั่งคอนโซลต่อไปนี้ js 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. ป้อนคำสั่งคอนโซลต่อไปนี้ js console.log('I have %i apples and %d oranges.', 2, 3.5);
2. คำสั่งด้านบนจะสร้างข้อความ I have 2 apples and 3 oranges.
3. แทนที่จะบันทึก 3.5 oranges เอาต์พุตจะเป็น 3 oranges %d ระบุว่าค่าควร/จะถูกแปลงเป็นจำนวนเต็ม

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

1. ป้อนคำสั่งคอนโซลต่อไปนี้ js console.log('Jane has %i kiwis.', 'two');
2. คำสั่งด้านบนจะสร้างข้อความ Jane has NaN kiwis.
3. %i ระบุว่าค่าควร/จะถูกแปลงเป็นจำนวนเต็ม แต่อาร์กิวเมนต์เป็นสตริง ดังนั้นจึงแสดงค่าเป็น NaN (Not-A-Number)

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

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

จัดรูปแบบด้วยตัวระบุรูปแบบ

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

1. ป้อนคำสั่งคอนโซลต่อไปนี้ js 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 ซึ่งมักใช้ไลบรารีการจัดรูปแบบ เช่น ชอล์ก, colors, ansi-colors, kleur

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

\x1B[𝘗1;…;𝘗nm

ที่ไหน

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

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

1. ป้อนคำสั่งคอนโซลต่อไปนี้ js console.log('\x1B[41;93;4mHello\x1B[m');
2. คำสั่งด้านบนจะสร้างข้อความ Hello ที่มีพื้นหลังสีแดง ข้อความสีเหลือง และขีดเส้นใต้

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

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

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

1. ป้อนคำสั่งคอนโซลต่อไปนี้ ```js const Hello = '\x1B[41;93;4mสวัสดี'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

   Console.log(สวัสดี + Space + โลก); ```

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