本文详解JavaScript中字符串拼接的占位符用法,包括%s、%d/%i、%f、%o及%c样式控制。同时系统介绍Console对象的常用API,涵盖table表格输出、log/info/warn/error日志级别,以及group/groupCollapsed分组折叠功能,帮助开发者高效进行前端调试。
字符串占位符替换
在控制台打印或拼接字符串时,可以利用占位符来简化操作。
常用的占位符包括:%s(字符串)、%d或%i(整数)、%f(小数,推荐用于整数和小数)、%o(对象)以及%c(用于设置后续字符串的样式)。
具体示例代码如下:
// %s示例
let s1 = '爱'
let s2 = '祖国'
console.log('001--我%s我的%s', s1, s2) // -> 我爱我的祖国
// %f 和 %i、%d示例
/*
推荐用 %f, 整数小数都没问题
%d只能输出整数,如果有小数会直接忽略
*/
let n1 = 100
let n2 = 5.8
console.log('002--我离考%d分还差%d分', n1, n2) // -> 我离考100分还差5分
console.log('002--我离考%i分还差%i分', n1, n2) // -> 我离考100分还差5分
console.log('003--我离考%f分还差%f分', n1, n2) // -> 我离考100分还差5.8分
// %o示例
let o = { name: '卡卡西', age: 25 }
console.log('004--执行任务忍者的资料是%o', o) // -> 执行任务忍者的资料是{name: "卡卡西", age: 25}
// %c示例
var str = '005--我是一个%c示例'
let st = 'color: #000; background-color: orange; padding: 5px;);'
console.log(str, st)
console.log(
'006--%c---------------我是分隔符-----------------',
'color:red;font-size:10px'
)
ript>

控制台打印示例
在浏览器中进行打印操作时,除了conlose.log()之外,还有其他实现方式。
console是JavaScript的原生对象,它提供了多种方法用于与控制台窗口进行交互。
本节仅列举其中较为常用的方法。
table()方法
对于复合类型的数据,可以使用console.table方法将其转换为表格形式显示。
let o = {
username: "卡卡西",
age: 25,
skill:['千鸟','土流壁','写轮眼']
}
console.table(o);

log、info、warn、error方法
console.log('001--我是一条普通的输出语句');
console.info('002--我是一条普通信息输出语句');
console.warn('003--我是一条警告输出语句');
console.error('004--我是一条错误输出语句');

group()与groupCollapsed(),以及groupend()方法
console.group() 和console.groupend()用于将显示的信息进行分组,适用于需要输出大量信息的场景。
console.group()默认会将本组输出信息展开显示。
console.groupend() 默认会将本组输出信息收起显示。
console.group('第一轮输出')
console.log('我是第一轮输出语句1')
console.log('我是第一轮输出语句2')
console.log('我是第一轮输出语句3')
console.log('我是第一轮输出语句3')
console.groupEnd()
console.groupCollapsed('第一轮输出')
console.log('又要输出了1')
console.log('又要输出了2')
console.log('又要输出了3')
console.groupEnd()
console.log('最后一次输出')

以上就是Web字符串拼接占位符及Console对象API详解的详细内容,更多关于Web字符串占位符及Console对象API的资料请关注本站其它相关文章!