console.log()的作用是什么

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

console.log()

(資料圖片)

語法：console.log("內(nèi)容");

作用：將"內(nèi)容"輸出在控制臺中，方便以后的調(diào)試，是一個(gè)使用頻率極高的功能。（控制臺在瀏覽器中按F12，打開開發(fā)者模式的第二項(xiàng)（console）即可，并且也可以在console選項(xiàng)卡下即時(shí)做測試）

console.log()主要是方便調(diào)式j(luò)avascript用的，可以看到在頁面中輸出的內(nèi)容，與alert相比，它能看到結(jié)構(gòu)化的東西，而alert淡出一個(gè)對象就是[obujct object]，但comsole能看到對象的內(nèi)容，console不會(huì)打斷頁面的操作。

相比alert他的優(yōu)點(diǎn)是：

他能看到結(jié)構(gòu)話的東西，如果是alert，淡出一個(gè)對象就是object object，但是console能看到對象的內(nèi)容。

console不會(huì)打斷你頁面的操作，如果用alert彈出來內(nèi)容，那么頁面就死了，但是console輸出內(nèi)容后你頁面還可以正常操作。

console里面的內(nèi)容非常豐富，你可以在控制臺輸入console，然后就可看到。

Console {memory: MemoryInfo, debug:  function , error:  function , info:  function , log:  function …}

它有網(wǎng)頁的各種提示。

console.log()的占位符

此處：主要聊一聊console.log()的占位符。其共有五種占位符

const name = "chinaBerg";const age = 88;const money = 12.88;const obj = {    status: "很積極"}console.log("我叫%s，%d歲，有%f元，狀態(tài)：%o", name, age, money, obj.status, "又打印一句話")

谷歌打印結(jié)果.png

可以看到我們后面使用的參數(shù)對前面的占位符進(jìn)行了替換，有點(diǎn)像我們字符串拼接的簡化操作。比如我們es5中的字符串拼接：

console.log("我叫" +  name + " ," + age +"歲，有" + money + "元")

es6已經(jīng)有了更強(qiáng)悍的字符串模板：

console.log(`我叫${name}，${age}歲, 有${money}元`);

es6的字符串模板中，只能使用%c占位符，其他占位符是沒有效果的。

// 注意這里字符串模板的最后插入了%fconsole.log(`我叫${name}，${age}歲, 有%f元`, 12.88);

%f沒有效果.png

%c占位符還是略有趣味的：

const css1 = "font-size: 22px;font-weight: bold";const css2 = "border: 1px solid green";const css3 = "color: #fff;background: #f00";// 占位符填入                console.log("%c %s + %s = %s", css1, 1, 2, 3);// 字符串拼接形式中插入%c占位符console.log("%c我的名字叫" + name + ", 今年" + age + "歲", css2);// es6字符串模板中插入%c占位符console.log(`%c我叫${name}，${age}歲, 有%f元`, css3);

谷歌打印效果.png

可以看到這些打印的內(nèi)容已經(jīng)被添加了我們的樣式。

【推薦學(xué)習(xí)：javascript視頻教程】

以上就是console.log()的作用是什么的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： console.log() javascript