本篇文章給大家分享的是有關JS console.log()提高工作效率的技巧，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

“專業(yè)、務實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 創(chuàng)新互聯是您可以信賴的網站建設服務商、專業(yè)的互聯網服務提供商! 專注于成都網站制作、做網站、軟件開發(fā)、設計服務業(yè)務。我們始終堅持以客戶需求為導向，結合用戶體驗與視覺傳達，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯建站將不斷地超越自我，追逐市場，引領市場！

我們知道 console.log(message)用法很簡單，表示將參數message 打印到控制臺上。

console.log('前端小智')
// 前端小智

const myAge = 28
console.log(myAge) // 28

本文主要介紹5個有用的技巧，可幫助你在使用console.log()時提高工作效率。

1. 打印全名變量

如果在控制臺打印多個變量，是數量比較多的情況下，我們很難區(qū)別哪個變量對應哪個值。

function sum(a, b) {
console.log(b);
return a + b;
}

sum(1, 2);
sum(4, 5);

執(zhí)行上述代碼后，我們只會看到一系列數字

要表示值和變量之間關系，可以用花括號把變量包起來：{b}：

2.高級格式化

將某些東西打印到控制臺最常見方法是簡單地使用一個參數調用console.log()：

console.log('前端小智') // 前端小智

有時我們可能想要一條包含多個變量的信息。 幸運的是，console.log()可以使用％s，％i等說明符以sprintf()的方式格式化字符串。

const user = '前端小智';
const attempts = 5;

console.log('%s 登錄失敗了 %i 次', user, attempts);
// 前端小智 登錄失敗了 5 次

％s和％i被user和attempts的值替換。 說明符％s轉換為字符串，而％i轉換為數字。

以下是可用說明符的列表：

說明符	作用
%s	元素轉換為字符串
%d 或 %i	元素轉換為整數
%f	元素轉換為浮點數
%o	元素以最有效的格式顯示
%O	元素以最有效的格式顯示
%c	應用提供的css

3.具有樣式的打印風格

瀏覽器控制臺允許我們將樣式應用于打印的消息，我們可以通過將％c說明符與相應的css樣式一起使用來實現，如下所示：

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

說明符％c應用CSS樣式'font-size: 36px; font-weight: bold'

4. 交互展示

日志樣式化依賴于主機的控制臺實現。像Chrome和Firefox這樣的瀏覽器提供對象和數組的交互展示，而 Node 控制臺輸出為文本。

來看看Chrome如何打印普通對象，數組和DOM樹，可以通過展開和折疊與這些元素進行交互。

4.1 Objects

const myObject = {
 name: 'John Smith',
 profession: 'agent'
};
console.log(myObject);

網站名稱：JSconsole.log()提高工作效率的技巧-創(chuàng)新互聯
鏈接URL：http://www.chinadenli.net/article46/igphg.html

成都網站建設公司_創(chuàng)新互聯，為您提供軟件開發(fā)、網站設計公司、網站內鏈、自適應網站、品牌網站設計、微信公眾號

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯