建站
咨詢
售后
建站咨詢
新聞中心
我們知道 console.log(message)用法很簡(jiǎn)單，表示將參數(shù)message 打印到控制臺(tái)上。
- console.log('前端小智')
- // 前端小智
- const myAge = 28
- console.log(myAge) // 28
本文主要介紹5個(gè)有用的技巧，可幫助你在使用console.log()時(shí)提高工作效率。
1. 打印全名變量
如果在控制臺(tái)打印多個(gè)變量，是數(shù)量比較多的情況下，我們很難區(qū)別哪個(gè)變量對(duì)應(yīng)哪個(gè)值。
- function sum(a, b) {
- console.log(b);
- return a + b;
- }
- sum(1, 2);
- sum(4, 5);
執(zhí)行上述代碼后，我們只會(huì)看到一系列數(shù)字：
要表示值和變量之間關(guān)系，可以用花括號(hào)把變量包起來(lái)：：
2. 高級(jí)格式化
將某些東西打印到控制臺(tái)最常見(jiàn)方法是簡(jiǎn)單地使用一個(gè)參數(shù)調(diào)用console.log()：
- console.log('前端小智') // 前端小智
有時(shí)我們可能想要一條包含多個(gè)變量的信息。幸運(yùn)的是，console.log()可以使用%s，%i等說(shuō)明符以sprintf()的方式格式化字符串。
- const user = '前端小智';
- const attempts = 5;
- console.log('%s 登錄失敗了 %i 次', user, attempts);
- // 前端小智 登錄失敗了 5 次
%s和%i被user和attempts的值替換。說(shuō)明符%s轉(zhuǎn)換為字符串，而%i轉(zhuǎn)換為數(shù)字。
以下是可用說(shuō)明符的列表：
說(shuō)明符作用%s元素轉(zhuǎn)換為字符串%d 或 %i元素轉(zhuǎn)換為整數(shù)%f元素轉(zhuǎn)換為浮點(diǎn)數(shù)%o元素以最有效的格式顯示%O元素以最有效的格式顯示%c應(yīng)用提供的CSS
具有樣式的打印風(fēng)格
瀏覽器控制臺(tái)允許我們將樣式應(yīng)用于打印的消息，我們可以通過(guò)將%c說(shuō)明符與相應(yīng)的CSS樣式一起使用來(lái)實(shí)現(xiàn)，如下所示：
- console.log('%c Big message', 'font-size: 36px; font-weight: bold');
說(shuō)明符%c應(yīng)用CSS樣式'font-size: 36px; font-weight: bold'
4. 交互展示
日志樣式化依賴于主機(jī)的控制臺(tái)實(shí)現(xiàn)。像Chrome和Firefox這樣的瀏覽器提供對(duì)象和數(shù)組的交互展示，而 Node 控制臺(tái)輸出為文本。
來(lái)看看Chrome如何打印普通對(duì)象，數(shù)組和DOM樹，可以通過(guò)展開(kāi)和折疊與這些元素進(jìn)行交互。
(1) Objects
- const myObject = {
- name: 'John Smith',
- profession: 'agent'
- };
- console.log(myObject);
在Chrome控制臺(tái)中，myObject的打印如下所示：
可以展開(kāi)和折疊對(duì)象屬性列表，也可以看到對(duì)象的原型。
(2) Arrays
- const characters = ['Neo', 'Morpheus', 'John Smith'];
- console.log(characters);
(3) DOM 樹結(jié)構(gòu)
我們可以直接與控制臺(tái)中顯示的DOM元素進(jìn)行交互。
- console.log(document.getElementById('root'));
在Chrome控制臺(tái)中，可以擴(kuò)展DOM元素，并可以全面瀏覽其內(nèi)容：
(4) 交互式嵌套里的消息
%o說(shuō)明符(為值關(guān)聯(lián)了正確的打印格式)可以在文本消息中插入數(shù)組，對(duì)象，DOM元素和常規(guī)文本，而不會(huì)失去交互性。
- const myObject = {
- name: 'John Smith',
- profession: 'agent'
- };
- console.log('Neo, be aware of %o', myObject);
從控制臺(tái)看，myObject數(shù)組不會(huì)轉(zhuǎn)換為字符串，而是保持交互性。
5. 在 Node 控制臺(tái)中打印大對(duì)象
Node中的log以純文本形式輸出。但是，Node 中的console.log()不會(huì)顯示具有深層嵌套的對(duì)象：第3級(jí)的對(duì)象顯示為[Object]。
- const myObject = {
- propA: {
- propB: {
- propC: {
- propD: 'hello'
- }
- }
- }
- };
- console.log(myObject);
運(yùn)行腳本時(shí)，propC的對(duì)象打印為[Object]：
要查看完整的對(duì)象結(jié)構(gòu)，可以使用JSON.stringify()：
- const myObject = {
- propA: {
- propB: {
- propC: {
- propD: 'hello'
- }
- }
- }
- };
- console.log(JSON.stringify(myObject, null, 2));
JSON.stringify(myObject, null, 2)返回該對(duì)象的JSON表示形式，第三個(gè)參數(shù)2在空格中設(shè)置縮進(jìn)大小。
希望這5個(gè)技巧可以使你使用 console.log() 體驗(yàn)更加高效。
網(wǎng)站標(biāo)題：這5個(gè)console.log()技巧幫你提高工作效率
本文地址：http://m.5511xx.com/article/dhdsoio.html
