console.log() in browser. Most of them use
console.log only to output some text at any particular time in code. But, do you know that you can do a lot with just console.log. You can add styles using CSS to output text, perform substitutions and more.
So, first let us start with rewinding what all
console.log() can do. It can perform following tasks like,
We would see one by one in detail.
To perform substitutions using
console.log(), you need to pass two parameters. First parameter is the format specifier which starts with
% symbol followed by a character which says whether we want to replace string, integer or object in console output. Let us see one by one.
To perform string substitutions, we need to use
%s format specifier in console.log().
You could see that
console.log() takes two parameters. First parameter has
%s format specifier and it means that it should be replaced with the string specified as second parameters and the same is seen in console output.
If you have multiple strings to be replaced, then you need to specify that many
%s format specifiers in first parameter and followed by strings to replace in the same order. The same is shown below,
To perform integer substitutions, we need to use
%i format specifier in console.log().
In previous example we have seen how to replace integer values and now we will see how to replace floating point value in
If you see here,
%f is replaced with float value. This would be helpful if you want to see the Date object as below,
If you want to replace with an object, then we need to use
%o as the format specifier.
It displays object in console and you can expand and see all of it's properties.
Till now we have seen each individual format specifier and understood how to replace string, integer, float value and objects. Let us combine all of them in one console.log().
These are different ways to perform substitutions using
console.log(). Next we will see how to style using CSS within
If you want to output a text with some styling, then we can do it using CSS in
console.log(). For this we will use
%c format specifier in first parameter. Here is the sample of what I am saying,
You need to make sure that there SHOULD NOT BE SPACE between
%c and text followed by it.
Also you need to be aware that every text followed by
%c will apply the same styling until it come across another
%c with another styling.
Multiple styles can also be applied separated by semicolon for the same
%c format specifier.
Above styling was called with single
%c with multiple styling like color and font-size.
Instead of having inline CSS, we can create variables and have them assigned with styling which we want. Then use those variables in
console.log() to get styles applied. This is shown below,
Here I created two variables success and failure with CSS styling and applied them in
console.log(). So, it shows Green background for success and Red background for failure.
That’s Awesome. Isn’t it?
These are the different ways to use
Let me know if you have any questions or suggestions in comments section.
Have fun in learning!
SHARE YOUR THOUGHTS WITH US!
What is Studytonight?
Made with by Abhishek Ahlawat
© 2019 Studytonight. All rights reserved.