console.log() 方法

2018-9-1 12:09| 作者: admin| 查看: 3060| 评论: 0|来自: 蚂蚁部落

方法用于在控制台输出信息,代码实例如下:

[JavaScript] 纯文本查看 复制代码
console.log("蚂蚁部落");

它可以接受多个参数,将它们的结果连接起来输出:

[JavaScript] 纯文本查看 复制代码
console.log('蚂蚁部落', '青岛市南区', 4)

每一个console.log()执行完毕之后,会自动换行:

[JavaScript] 纯文本查看 复制代码
console.log("蚂蚁部落一");
console.log("蚂蚁部落二");
console.log("蚂蚁部落三");
// 蚂蚁部落一
// 蚂蚁部落二
// 蚂蚁部落三

console.log方法可以使用占位符,但是要比C中的少的多,只有五种:

(1).%s:字符串的占位符。

(2).%d或%i:整数的占位符。

(3).%f:浮点数占位符。

(4).%o:对象占位符。

(5).%c:CSS格式字符串占位符。

如果方法的第一个参数中使用了占位符,那么就依次使用后面的参数进行替换。

字符串占位符:

[JavaScript] 纯文本查看 复制代码
console.log("%s欢迎您","蚂蚁部落");

控制台运行截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/01/121158xdf4d44wdzopiwkf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

整数占位符代码:

[JavaScript] 纯文本查看 复制代码
console.log("%d年%d月%d日",2014,10,1);

控制台运行截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/01/121203giyfgge3tg1gf6xx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

浮点数占位符代码:

[JavaScript] 纯文本查看 复制代码
console.log("这是一个浮点数%f",3.14);

控制台运行截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/01/121211biafza40kjlj0q0j.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对象占位符代码:

[JavaScript] 纯文本查看 复制代码
var obj={
  webName:"蚂蚁部落",
  age:2
}
console.log("%o",obj);

控制台运行截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/01/121216vkgl7kuqkia1uia5.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

CSS格式字符串占位符:

后面对应的参数必须是CSS语句,用来对输出内容进行样式渲染

[JavaScript] 纯文本查看 复制代码
console.log(
  "%c蚂蚁部落",
  "color: blue; background: red;"
)

控制台运行截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/01/121234vby3wqppljpmz31q.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

console.info()、console.debug()、console.warn()和console.error():

上面四个方法与console.log()使用完全相同,只是在信息输出的时候会有不同的提示。

可以根据应用场景,灵活选择即可:

[JavaScript] 纯文本查看 复制代码
console.info("蚂蚁部落");//输出一般的信息
console.debug("蚂蚁部落debug");//出错信息
console.warn("蚂蚁部落警告");//警告提示信息
console.error("蚂蚁部落error");//错误提示信息

上面四个方法的使用方式其实都是一样的,不同的是输出内容的样式有所差别,如下图:

a:3:{s:3:\"pic\";s:43:\"portal/201809/01/121240ivmi4vc2k2wkodm4.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特别说明:console.error()方法可能会给出更多的错误信息,不仅仅是图标的不同。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部