Używanie console.log z substitution strings

Console.log inaczej czyli substitution strings w akcji

Jeśli spojrzysz na dokumentację funkcji console.log to zwrócisz uwagę na to, że zawiera ona również drugą część, którą w artykule o podstawach console.log pominęliśmy.

Pełna definicja funkcji console.log

Druga część definicji mówi nam, że w funkcji console.log możemy użyć tzw. substitution strings. Są to specjalne symbole, które pełnią rolę zmiennych i zostaną zastąpione wartościami podanymi po przecinku.

Zobaczmy przykład:

				
					const str1 = "tekst1";
const str2 = "tekst2";

console.log("wartość zmiennej str1 to %s a str2 to %s", str1, str2);
				
			

W naszym przykładzie wartość zmiennej str1 wskoczy na miejsce pierwszego %s, a wartość zmiennej str2 odpowiednio na miejsce kolejnego %s. Podobnie jak przy „zwykłym” użyciu console.log, liczba podanych substitution strings jest dowolna.

Schematyczne wyjaśnienie działania substitution strings w console.log

Ale po co tak komplikować zwykły console.log?

Można zastanowić się, czy używanie substitution strings będzie w praktyce wygodne. Zanim wprowadzono template strings w ES2015 takie wplecenie kilku zmiennych do logowanego tekstu faktycznie było dość uciążliwe, bo musieliśmy używać klasycznej konkatenacji stringów używając symbolu +. Aktualnie mamy do dyspozycji template strings, które znacznie ułatwiają tego typu operacje.

A tak wygląda „składanie” tekstu w omówionych trzech podejściach:

				
					const str1 = "tekst1";
const str2 = "tekst2";

// klasyczne łączenie stringów za pomocą +
console.log("wartość zmiennej str1 to " + str1 + " a str2 to " + str2);

// wykorzystanie substitution strings
console.log("wartość zmiennej str1 to %s a str2 to %s", str1, str2);

// wykorzystanie template strings
console.log(`wartość zmiennej str1 to ${str1} a str2 to ${str2}`);
				
			

Inne typy substitution strings w console.log

Do tej pory omówiliśmy tylko symbol %s, który sprawia, że przyporządkowane do niego zmienne zostaną sformatowane jako string. I faktycznie trzeba przyznać, że wraz z nowoczesną składnią JavaScript stosowanie %s będzie w większości przypadków niepotrzebną komplikacją. Jednak oprócz %s mamy do dyspozycji również substitution strings, które wspierają obiekty oraz dane typu number.

Logowanie obiektów z substitution strings

W poprzednim artykule o podstawach console.log omawialiśmy co się stanie, jeśli spróbujemy wpleść w wiadomość zmienną typu obiekt za pomocą template strings. Na obiekcie wykonana zostanie funkcjia toString(), która da nam wynik zdecydowanie nie taki, jakiego byśmy chcieli – [object Object]

				
					const obj1 = {
  peak: "Sniezka",
  mountains: "Sudety",
  timestamp: 1614942811096
};

const obj2 = {
  peak: "Tarnica",
  mountains: "Bieszczady",
  timestamp: 1614942811096
};

console.log(`obiekt lokacji 1 to ${obj1}, a lokacji 2 to ${obj2}`);
				
			

Otrzymamy taki wynik w konsoli:

Użycie template string do logowania obiektu w console.log pokazuje [object Object]

Jeśli więc masz potrzebę skomponowania wiadomości zawierającej w środku obiekt, z pomocą może przyjść Ci właśnie substitution string i symbol %o. Dzięki niemu przekazany obiekt nie zostanie przekształcony w string i będziesz mieć możliwość rozwinięcia go. Pamiętaj jednak, że to wciąż jest tylko referencja do obiektu, tak jak przy zwyczajnym logowaniu. O pułapkach przy logowaniu obiektów możesz przeczytać tutaj.

				
					const obj1 = {
  peak: "Sniezka",
  mountains: "Sudety",
  timestamp: 1614942811096
};

const obj2 = {
  peak: "Tarnica",
  mountains: "Bieszczady",
  timestamp: 1614942811096
};

console.log("obiekt lokacji 1 to %o, a lokacji 2 to %o", obj1, obj2);
				
			

Powyższy kod da nam taki wynik w konsoli:

Dzięki zastosowaniu substitution strings możemy wplatać obiekty w dłuższą wiadomość.

W przypadku symbolu %o oprócz małego „o” możesz też zastosować wielkie „O”. Przy logowaniu zwykłych obiektów nie ma to wielkiego znaczenia, jednak ciekawą różnicę możesz zaobserwować w konsoli przeglądarki Chrome (oraz kilku innych z wyjątkiem Firefox), kiedy spróbujesz wylogować element DOM.

				
					console.log("Male o: %o", document.body);
console.log("Duze O: %O", document.body);
				
			

Jak zobaczysz poniżej, małe „o” wyświetli w konsoli Chrome element DOM jako drzewko znaczników. Z kolei duże „O” da nam element DOM jako obiekt. Zastosowanie tej komendy jest więc odpowiednikiem funkcji console.dir(), która właśnie w taki sposób loguje elementy DOM do konsoli.

Logowanie liczb w console.log z substitution strings

Oprócz danych typu string i object substitution strings pozwalają również na przekazanie do konsoli danych typu number. Służą do tego aż trzy różne symbole: %d%i oraz %f.

Symbol %d (oraz %i) konwertują podaną wartość do liczby całkowitej. Jeśli więc podamy jakąś wartość po przecinku, wyświetlona zostanie tylko część całkowita danej liczby. 

Zobaczmy to na przykładzie.

				
					console.log("num_d: %d", 1);
console.log("num_f: %d", 0.9);
				
			

A oto wyniki, jakie otrzymamy w konsoli:

Użycie formatowania numerów w console.log z substitution strings

Formatowanie liczb zmiennoprzecinkowych

Zobaczmy teraz, w jaki sposób zostaną wyświetlone obie liczby, jeśli zastosujemy %f czyli formatowanie liczb zmiennoprzecinkowych. Tutaj możesz zaobserwować też ciekawe różnice między przeglądarkami Chrome i Firefox.

				
					console.log("num_d: %f", 1);
console.log("num_f: %f", 0.9);
				
			

Konsola przeglądarki Firefox wyświetli stałą liczbę miejsc po przecinku, a konsola Chrome dostosuje liczbę miejsc po przecinku do podanej liczby, obcinając automatycznie zbędne zera.

Porównanie formatowania liczb za pomocą %f w console.log w przeglądarkach Firefox i Chrome

Lepsze formatowanie liczb w console.log z substitution strings

Czy dałoby się więc ustawić jakoś liczbę miejsc po przecinku, skoro aż 6 miejsc to zdecydowanie za dużo jak na nasze potrzeby? Oczywiście że tak! Możesz to zrobić w następujący sposób:

				
					console.log("num_d: %.2f", 1);
				
			

Liczba po kropce wskazuje na liczbę cyfr, jakie chcesz wyświetlić po przecinku. Dzięki takiemu zapisowi podana wartość zostanie wyświetlona ze stałą liczbą miejsc po przecinku. Jeśli w Twojej liczbie tych miejsc będzie więcej, to zostanie ona zaokrąglona. Poniżej zobacz wynik w konsoli Firefox:

Formatowanie liczby cyfr po przecinku w console.log przez przeglądarkę Firefox

Jednak na chwilę obecną Chrome (a także Edge i Opera) całkowicie ignoruje taki zapis.

Formatowanie liczby cyfr po przecinku w console.log przez przeglądarkę Chrome

Możesz ustawić nie tylko liczbę miejsc po przecinku, ale również stałą liczbę cyfr w liczbach całkowitych. W tym wypadku również efekt będzie widoczny jedynie w przeglądarce Firefox.

				
					console.log("num_d: %.3d", 1);
				
			

Wynik w konsoli Firefox:

W konsoli Firefox za pomocą substitution strings możemy wyświetlić stałą liczbę cyfr dla wartości całkowitych

Kolejne ciekawe różnice w console.log między Chrome i Firefox

Inne ciekawe różnice między konsolami przeglądarek Chrome i Firefox można zaobserwować gdy poeksperymentujemy z różnymi typami danych.

				
					console.group("formatowanie %d");
console.log("num_d: %d", 1);
console.log("num_f: %d", 1.9);
console.log("str_as_num: %d", "1");
console.log("str_txt: %d", "tekst");
console.log("arr: %d", []);
console.log("obj: %d", {});
console.log("null: %d", null);
console.log("undefined: %d", undefined);
console.log("NaN: %d", NaN);
console.groupEnd();

console.group("formatowanie %f");
console.log("num_d: %f", 1);
console.log("num_f: %f", 0.3);
console.log("str_as_num: %f", "1");
console.log("str_txt: %f", "tekst");
console.log("arr: %f", []);
console.log("obj: %f", {});
console.log("null: %f", null);
console.log("undefined: %f", undefined);
console.log("NaN: %f", NaN);
console.groupEnd();
				
			

Widać wyraźnie, że przeglądarka Chrome zdecydowanie bardziej restrykcyjnie podchodzi do prób formatowania różnych typów danych jako number – wszystkie dane, nie będące typu number otrzymują w konsoli wartość NaN.

Różnice w konwertowaniu różnych typów zmiennych na number z użyciem substitution strings w przeglądarkach Firefox i Chrome

Szczególnie interesująca z punktu widzenia debugowania może być konwersja wartości numerycznej ale o typie string czyli np. "1". Jeśli użyjemy substitution string to konsola Chrome wyświetli taką wartość jako NaN. Może się to przydać w szybkim wykrywaniu problemów z wartościami numerycznymi nie będącymi typu number np. pochodzących z formularzy czy z API.

Podsumowanie

Teraz już znasz i dobrze rozumiesz substitution strings w console.log. Możesz zastanowić się, w jaki sposób mogą ułatwić Ci życie w codziennym debuggowaniu kodu. Bardzo chętnie dowiem się o Twoich pomysłach! Możesz napisać do mnie wiadomość albo podzielić się nimi w komentarzach.

Koniecznie też zajrzyj do kolejnego artykułu z serii. Opowiem Ci w nim, jak używać styli w console log i jak można je ciekawie wykorzystać w codziennej pracy. Zobaczysz też, w jaki nietypowy sposób używają tej funkcjonalności znane firmy.

Wartościowe materiały prosto na Twoją skrzynkę mailową

Zapisz się do newslettera i nie przegap kolejnych artykułów, które pogłębią Twoją wiedzę o Java Script. Absolutne zero spamu.

Uzupełniając powyższe pole wyrażam zgodę na zapis do newslettera, aby otrzymać więcej materiałów i ciekawych linków z portalu javascriptbeztajemnic.pl. Zero spamu. Mogę w każdej chwili wycofać zgodę zgodnie z Polityką Prywatności.