Formatowanie wiadomości i zmienianie ich stylu w konsoli

Jecelyn Yeen

Z tego przewodnika dowiesz się, jak formatować i określać styl wiadomości w konsoli Narzędzi deweloperskich w Chrome. Więcej informacji o rejestrowaniu wiadomości w konsoli znajdziesz w artykule Pierwsze kroki z komunikatami logowania.

W tym przewodniku przyjęto założenie, że znasz podstawy tworzenia stron internetowych, np. wiesz, jak używać JavaScriptu, aby zwiększyć interaktywność strony.

Formatowanie komunikatów w konsoli

Komunikaty w konsoli możesz sformatować za pomocą specyfikatorów formatu.

Specyfikacje formatu zaczynają się od znaku procentu (%) i kończą „znakem typu” , który wskazuje typ danych (liczba całkowita, zmiennoprzecinkowa itp.).

Na przykład

1. Otwórz konsolę

2. Wpisz to polecenie konsoli.

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

3. Powyższe polecenie tworzy komunikat Chrome DevTools is awesome..

Oto lista specyfikatorów formatów, które są obecnie obsługiwane w Narzędziach deweloperskich w Chrome.

Zastosuj wiele specyfikatorów formatu

W wiadomości możesz użyć więcej niż jednego specyfikatora formatu.

1. Wpisz to polecenie konsoli.

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

2. Powyższe polecenie tworzy komunikat The total weight of 3 apples and 2 oranges is 432.4 grams..

Konwersje typu

Komunikat wyjściowy zostanie przekonwertowany zgodnie ze specyfikacją formatu.

1. Wpisz to polecenie konsoli.

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

2. Powyższe polecenie tworzy komunikat I have 2 apples and 3 oranges..

3. Zamiast logowania 3.5 oranges dane wyjściowe to 3 oranges. %d wskazuje, że wartość powinna zostać przekonwertowana na liczbę całkowitą.

Oto przykład, co się dzieje, gdy konwersja typu jest nieprawidłowa.

1. Wpisz to polecenie konsoli.

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

2. Powyższe polecenie tworzy komunikat Jane has NaN kiwis..

3. %i wskazuje, że wartość powinna/zostanie przekonwertowana na liczbę całkowitą, ale argument jest ciągiem. W ten sposób funkcja zwraca NaN (Not-A-Number).

Komunikaty konsoli stylu

Istnieją 2 sposoby określania stylu komunikatów w konsoli w Narzędziach deweloperskich.

Styl za pomocą specyfikatora formatu

Aby określić styl wiadomości w konsoli za pomocą CSS, możesz użyć specyfikatora formatu %c.

1. Wpisz to polecenie konsoli.

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

2. Powyższe polecenie generuje Hooray z zastosowanymi stylami CSS.

Styl z sekwencjami ucieczki ANSI

Aby określić styl komunikatów w konsoli, możesz użyć sekwencji ucieczki ANSI.

Programiści Node.js często kolorują komunikaty logu za pomocą sekwencji ucieczki ANSI, często z pomocą niektórych bibliotek stylu, takich jak chalk, colors, ansi-colors czy kleur.

Możesz jednak zmienić styl wiadomości za pomocą sekwencji ucieczki ANSI bez użycia żadnych bibliotek. Składnia:

\x1B[𝘗1;…;𝘗nm

Gdzie,

• Od 𝘗1 do 𝘗n są prawidłowymi podsekwencjami parametrów SGR (Wybierz odwzorowanie grafiki).
• Dowolny parametr od 𝘗1 do 𝘗n można pominąć – w takim przypadku przyjmuje się, że jego wartość wynosi zero.
• \x1B[m to skrót od \x1B[0m, w którym atrybut display zostanie zresetowany.

Na przykład

1. Wpisz to polecenie konsoli.

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

2. Powyższe polecenie utworzy wiadomość Hello z czerwonym tłem i żółtym tekstem z podkreśleniem.

Oto lista kodów kolorów obsługiwanych w Narzędziach deweloperskich.

Oto lista kodów stylu obsługiwanych w Narzędziach deweloperskich.

Oto kolejny bardziej skomplikowany przykład z wieloma stylami.

1. Wpisz to polecenie konsoli.

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

2. Powyższe polecenie tworzy wiadomość Hello World w 3 różnych stylach.