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

เยเซลิน เยน

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

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

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

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

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

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

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

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

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

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

คุณสามารถใช้ตัวระบุรูปแบบได้มากกว่า 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. รายการ NaN ในข้อความของคอนโซล
  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 เอาต์พุตรูปแบบด้วย CSS

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

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

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

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

\x1B[𝘗1;…;𝘗nm

ที่ไหน

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

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

  1. ป้อนคำสั่งต่อไปนี้ของคอนโซล js 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. ป้อนคำสั่งคอนโซลต่อไปนี้ ```js 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 รูปแบบที่แตกต่างกัน Hello World