格式化控制檯輸出

許多控制檯的列印方法也可以使用%令牌處理類似 C 的字串格式

console.log('%s has %d points', 'Sam', 100);

顯示 Sam has 100 points

Javascript 中的格式說明符的完整列表是:

輸出
%s 將值格式化為字串
%i%d 將值格式化為整數
%f 將值格式化為浮點值
%o 將值格式化為可擴充套件 DOM 元素
%O 將值格式化為可擴充套件的 JavaScript 物件
%c 將 CSS 樣式規則應用於第二個引數指定的輸出字串

高階造型

當 CSS 格式說明符(%c)放在字串的左側時,print 方法將接受帶有 CSS 規則的第二個引數,該引數允許對該字串的格式進行細粒度控制:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

顯示:

StackOverflow 文件

可以使用多個%c 格式說明符:

  • %c 右側的任何子字串在 print 方法中都有相應的引數;
  • 如果不需要將 CSS 規則應用於相同的子字串,則此引數可以是 emtpy 字串;
  • 如果兩個%c 格式說明找到,1 (在%c 包裹)和 2 字串將在 2 中所定義他們的規則 第二 和 3 分別列印方法的引數。
  • 如果三個%c 格式說明找到,則 1 ,2 和 3 的子字串將在 2 中所定義他們的規則 ND ,3 和 4 分別的引數,等等…
console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

顯示:

StackOverflow 文件

使用組縮排輸出

可以使用以下方法在除錯控制檯的可摺疊組中對輸出進行設計和封裝:

  • console.groupCollapsed() :建立一個摺疊的條目組,可以通過公開按鈕進行擴充套件,以顯示呼叫此方法後執行的所有條目;
  • console.group() :建立一個擴充套件的條目組,可以摺疊這些條目,以便在呼叫此方法後隱藏條目。

可以使用以下方法刪除後驗條目的標識:

  • console.groupEnd() :退出當前組,允許在呼叫此方法後在父組中列印較新的條目。

可以級聯組以允許多個同名的輸出或可摺疊的圖層彼此:

StackOverflow 文件 = Collapsed group expanded => StackOverflow 文件