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.

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

Na przykład

  1. Otwórz konsolę
  2. Wpisz to polecenie w konsoli: js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. Powyższe polecenie tworzy komunikat Chrome DevTools is awesome.. formatu wartości ciągu znaków

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

Specyfikator Dane wyjściowe
%s Formatuje wartość jako ciąg znaków
%i lub %d Formatuje wartość jako liczbę całkowitą
%f Formatuje wartość jako wartość zmiennoprzecinkową
%o Formatuje wartość jako rozwijany element DOM
%O Formatuje wartość jako rozwijany obiekt JavaScript
%c Stosuje do ciągu wyjściowego reguły stylu CSS określone przez drugi parametr

Zastosuj wiele specyfikatorów formatu

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

  1. Wpisz to polecenie w konsoli: js 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.. specyfikatory wielu formatów

Konwersje typu

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

  1. Wpisz to polecenie w konsoli: js 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.. formatuj wartości całkowite
  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 w konsoli: js console.log('Jane has %i kiwis.', 'two');
  2. Powyższe polecenie tworzy komunikat Jane has NaN kiwis.. NaN w komunikacie w konsoli
  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 w konsoli: js 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 tworzy Hooray z zastosowanymi stylami CSS. stylizowanie danych wyjściowych za pomocą 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 w konsoli: js console.log('\x1B[41;93;4mHello\x1B[m');
  2. Powyższe polecenie tworzy wiadomość Hello z czerwonym tłem i żółtym tekstem z podkreśleniem. Cześć

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

Pierwszy plan Wprowadzenie Jasny motyw Ciemny motyw
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

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

Parametry Znaczenie
0 Zresetuj wszystkie atrybuty wyświetlania
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Dodaj underline do usługi text-decoration
9 Dodaj line-through do usługi text-decoration
22 Resetuj właściwość font-weight
23 Resetuj właściwość font-style
24 Usuń usługę underline z usługi text-decoration
29 Usuń usługę line-through z usługi text-decoration
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 Zresetuj color property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 Zresetuj background property
53 Dodaj overline do usługi text-decoration
55 Usuń usługę overline z usługi text-decoration

Oto kolejny bardziej skomplikowany przykład z wieloma stylami.

  1. Wpisz to polecenie konsoli. ```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    Console.log(hello + spacja + świat); „``”

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