What is the function of console.log()

The function of console.log(): output the content specified by the parameters to the console to facilitate debugging the code. Compared with alert, console.log() can see structured things. An object faded out by alert is "[obujct object]", but console.log() can see the content of the object, and console will not interrupt the operation of the page. .

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

console.log()

Syntax: console.log("Content");

Function: Output the "content" in the console to facilitate future debugging. It is a very frequently used function. (For the console, just press F12 in the browser and open the second item (console) of the developer mode, and you can also do instant testing under the console tab)

console.log() is mainly for convenience Used for debugging JavaScript, you can see the content output on the page. Compared with alert, it can see structured things. The object faded out by alert is [obujct object], but console can see the content of the object. Console Will not interrupt the operation of the page.

Compared with alert, its advantage is:

• He can see the structural things. If it is alert, the faded object is object object, but the console can see it. to the contents of the object.

• The console will not interrupt the operation of your page. If you use alert to pop up content, the page will be dead, but after the console outputs the content, your page can still operate normally.

• The content in the console is very rich. You can enter console in the console and then you can see it.

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

It has various tips for web pages.

Placeholder for console.log()

Here: Mainly talk about console.log( ) placeholder. There are five placeholders

• %s string
• %d or %i integer
• %f floating point number
• %o Object link
• %c CSS format string If a placeholder is used in the first parameter of the method, then the subsequent parameters will be used for replacement.

const name = 'chinaBerg';
const age = 88;
const money = 12.88;
const obj = {
    status: '很积极'
}

console.log('我叫%s，%d岁，有%f元，状态：%o', name, age, money, obj.status, '又打印一句话')

Google print results.png

You can see that the parameters we use later replace the previous placeholders , a bit like our simplified string concatenation operation. For example, our string splicing in es5:

console.log('我叫' +  name + ' ,' + age +'岁，有' + money + '元')

es6 already has a more powerful string template:

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

es6 string In the template, only the %c placeholder can be used, other placeholders have no effect.

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

##%f has no effect.png

%cThe placeholder is still slightly interesting:

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

Google print effect.png

You can see that these printed contents have been added with our styles.

[Recommended learning:

javascript video tutorial]

The above is the detailed content of What is the function of console.log(). For more information, please follow other related articles on the PHP Chinese website!