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

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

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

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

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

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

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

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

    const tools = 'Chrome DevTools';
    console.warn('%s is awesome.', tools);
    
  3. คำสั่งด้านบนจะสร้างข้อความ Chrome DevTools is awesome. วันที่ ค่าสตริงรูปแบบ

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

ผู้ระบุ เอาต์พุต
%s จัดรูปแบบค่าเป็นสตริง
%i หรือ %d จัดรูปแบบค่าเป็นจำนวนเต็ม
%f จัดรูปแบบค่าเป็นค่าทศนิยม
%o จัดรูปแบบค่าเป็นองค์ประกอบ DOM ที่ขยายได้
%O จัดรูปแบบค่าเป็นออบเจ็กต์ JavaScript ที่ขยายได้
%c ใช้กฎรูปแบบ CSS กับสตริงเอาต์พุตตามที่ระบุไว้โดยพารามิเตอร์ที่ 2

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

คุณใช้ตัวระบุรูปแบบในข้อความได้มากกว่า 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.5 oranges เอาต์พุตจะเป็น 3 oranges %d ระบุว่าค่าควร/จะถูกแปลงเป็นจำนวนเต็ม

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

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

    console.log('Jane has %i kiwis.', 'two');
    
  2. คำสั่งด้านบนจะสร้างข้อความ Jane has NaN kiwis. วันที่ NaN ในข้อความคอนโซล

  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 วันที่ จัดรูปแบบเอาต์พุตด้วย 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. ป้อนคำสั่งคอนโซลต่อไปนี้

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

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

เบื้องหน้า ข้อมูลเบื้องต้น ธีมสว่าง ธีมมืด
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

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

พารามิเตอร์ ความหมาย
0 รีเซ็ตแอตทริบิวต์การแสดงผลทั้งหมด
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 เพิ่ม underline ลงในพร็อพเพอร์ตี้ text-decoration
9 เพิ่ม line-through ลงในพร็อพเพอร์ตี้ text-decoration
22 รีเซ็ตพร็อพเพอร์ตี้ font-weight
23 รีเซ็ตพร็อพเพอร์ตี้ font-style
24 นำ underline ออกจากพร็อพเพอร์ตี้ text-decoration
29 นำ line-through ออกจากพร็อพเพอร์ตี้ text-decoration
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 รีเซ็ตcolor property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 รีเซ็ตbackground property
53 เพิ่ม overline ลงในพร็อพเพอร์ตี้ text-decoration
55 นำ overline ออกจากพร็อพเพอร์ตี้ text-decoration

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

  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 รูปแบบที่แตกต่างกัน วันที่ สวัสดีทุกคน