阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 02月29日

6 個 JavaScript 控制台方法，例如泰勒絲民間傳說歌詞

標題：6 個 JavaScript 控制台方法，如泰勒絲民間傳說歌詞

發表：真實

描述：了解六種鮮為人知的 JavaScript 控制台方法，這些方法與泰勒絲 (Taylor Swift) 最新專輯《Followre》中的歌詞類似。

標籤： javascript、webdev、除錯、生產力

封面圖片：https://twilio-cms-prod.s3.amazonaws.com/images/ts\_AMVvYGp.width-1616.png

這篇部落格文章是為Twilio撰寫的，最初發佈在 Twilio 部落格上。

如果您進行 Web 開發，您可能至少使用過一次console.log （或超過一千次...誰在數？），因為這是最好的偵錯方法！但您知道還有其他控制台方法嗎？ Taylor Swift 的最新專輯《Followre》充滿了沉思的隱喻、典故和象徵意義，這篇文章將其中一些歌詞比作 6 個鮮為人知的 JavaScript console方法。

控制台到底是什麼？

console是一個全域物件，允許開發人員存取偵錯控制台。它有大量的方法，可以更輕鬆地記錄語句、變數、函數、錯誤等——天哪！

6種類似民間傳說歌詞的控制台方法

1. console.log = "但這會很有趣 // 如果你是那個人"

console.log是最常用的方法。用於通用日誌記錄，它在 Web 控制台中顯示傳遞給它的訊息。你知道你可以用 CSS 來裝飾它嗎？

console.log("%cWARNING: you will be obsessed with folklore", "font: 2em sans-serif; color: yellow; background-color: red;");

輸出console.log css

Log簡單、可靠，並且可以完成工作，但它被過度使用，吸引了類似console方法的所有註意力，這些方法做得更多。如果Log是您需要的一種或唯一的控制台方法，那麼它會很有趣 - 但正如本文將要展示的，您將透過其他console方法獲得更多樂趣！

2. console.table = "我是一個鏡球 // 今晚我會向你展示你自己的每個版本"

table方法接受一個物件或陣列並將輸入記錄為表格，使其看起來更乾淨：它就像log的更好版本。與鏡像球一樣， table可以透過接受可選參數columns來選擇要顯示的列子集來顯示不同版本的輸入。

陣列中的每個元素（如果資料是物件，則為每個可枚舉屬性）將是表中的一行。下面的 JavaScript 程式碼有一個物件，您可以看到最初使用 log 的輸出。

function Album(name, year, numSongs) {
    this.name = name;
    this.year = year;
    this.numSongs = numSongs;
  }
  const fearless = new Album("Fearless", 2008, 13);
  const speakNow = new Album("Speak Now", 2010, 19);
  const folklore = new Album("folklore", 2020, 16);
  console.log([fearless, speakNow, folklore]);

物件的console.log

這很好，但是給定陣列時table的輸出看起來更好：

console.table([fearless, speakNow, folklore]);

物件的console.table

接受columns參數，如console.table([fearless, speakNow, folklore], ["name"]);會顯示：

帶有額外列參數的 console.table

您也可以傳遞它（而不是name ） year或numSongs - 就像鏡子球一樣，表格可以向您顯示其輸入的每個版本！

3. console.assert =“如果你從不流血，你就永遠不會成長”

console.assert(expression, message)僅在表達式為 false 時才列印。泰勒絲 (Taylor Swift) 在歌曲《The 1》中的歌詞「如果你從不流血，你就永遠不會成長」也同意這一點——如果你從不流血，或者失敗，或者有時不正確，你就永遠不會成長。 assert表明，透過錯誤，您可以成長為一名開發人員，因為您可以修復錯誤，控制台會透過將斷言變成漂亮的紅色來幫助您。

const numFolkloreSongs = 16;
const num1989Songs = 13;
console.assert(numFolkloreSongs > num1989Songs, 'folklore has more songs than 1989'); //won't run
console.assert(num1989Songs + 3 > numFolkloreSongs, 'the number of songs on 1989 + 3 is not greater than the number of folklore songs');

斷言失敗

4. console.time/console.timeEnd = "時間，神秘的時間/切開我，然後治癒我。"

console.time()建立一個計時器來查看某些操作需要多長時間。它可以採用名稱或標籤的可選參數來區分網頁上最多 10,000 個計時器。

console.timeEnd()停止計時器，並在控制台中顯示結果。

時間可能很艱難——它可以讓你心碎，但它也可以治癒你，讓你感覺更好。

console.time('sms timer');
let x = 0;
while (x < 3) {
  console.log("They told me all of my cages were mental/So I got wasted like all my potential");
  x+=1;
}
console.timeEnd('sms timer');

控制台時間

如果沒有標籤傳遞給console.time() ，它將記錄 default 而不是sms time 。

5. console.clear：“如果我對你來說已經死了，為什麼你還在守靈？”

console.clear簡短、甜蜜、簡潔。它會清除控制台，並且在某些環境中，可能會列印諸如“控制台已清除”之類的訊息。

歌詞“如果我對你來說已經死了，為什麼你還在守靈？”是憂鬱的，但也有一些尖銳的味道：它非常適合當你想要結束對話時，就像clear一樣，你可以重新開始，重新開始。

6. console.group/console.groupEnd ="想到一直以來有一條看不見的繩子把你和我綁在一起，這不是很美好嗎？"

console.group表示內聯訊息群組的開始， console.groupEnd標記其結束。如果群組包含日誌，它們將作為一個群組列印，因此格式更清晰，您可以更輕鬆地了解群組包含的內容。

就像有一些看不見的字串（或console命令）將群組中的專案捆綁在一起。

console.group("folklore");
console.log("the 1");
console.log("cardigan");
console.log("the last great american dynasty");
console.log("invisible string");
console.log("my tears ricochet");
console.groupEnd();
console.log("outside");