阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

標題: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

您也可以傳遞它(而不是nameyearnumSongs - 就像鏡子球一樣,表格可以向您顯示其輸入的每個版本!

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");

團體

控制台的下一步是什麼?

tswift 太棒了 gif

還有許多其他控制台方法未包含在此處(部分原因是它們與 Taylor Swift 歌詞的關係不大。)有關控制台方法的更多訊息,請查看 Mozilla 開發者網絡有關 Web 技術的文件。讓我知道您最喜歡或最不喜歡的民俗歌曲在線或在評論中!

  1. 推特: @lizziepika

  2. GitHub:伊莉莎白西格爾

  3. 電子郵件:[email protected]


原文出處:https://dev.to/twilio/6-javascript-console-methods-like-taylor-swift-folklore-lyrics-3h0k


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈