web开发js字符串拼接占位符及conlose对象Api详解

 更新时间:2021年09月24日 16:55:50   作者:SpringSir  
本篇文章主要为大家介绍了web开发中字符串的拼接,占位符的使用以及conlose对象Api的使用,有需要的朋友可以借鉴参考下,希望可以有所帮助

占位符替换

控制台打印(conlose.log())或者拼接字符换, 可以借助占位符解决

%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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fHD9IthG-1627465023483)(conlose/image-20210728170625837.png)]

控制台打印

在浏览器打印, 并不只有 conlose.log() 这一种方式;

console对象是JavaScript的原生对象, 它提供了多种方法,用来与控制台窗口互动;

本节只列举我认为的常用方法.

table()

复合类型的数据,console.table方法可以将其转为表格显示。

let o = {
    username: "卡卡西",
    age: 25,
    skill:['千鸟','土流壁','写轮眼']
}
console.table(o);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9cbDkCtF-1627465023486)(conlose/image-20210728172629214.png)]

log、info、warn、error

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jluA4C5G-1627465023487)(conlose/image-20210728172305658.png)]

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('最后一次输出')

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZN4LuIZ-1627465023489)(conlose/image-20210728173352647.png)]

以上就是web字符串拼接占位符及conlose对象Api详解的详细内容,更多关于web字符串占位符及conlose对象Api的资料请关注脚本之家其它相关文章!

相关文章

  • Openlayers实现点闪烁扩散效果

    Openlayers实现点闪烁扩散效果

    这篇文章主要为大家详细介绍了Openlayers实现点闪烁扩散效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Highcharts 非常实用的Javascript统计图demo示例

    Highcharts 非常实用的Javascript统计图demo示例

    官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可,本文实现的是一个学生成绩走势demo,有需求的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • javascript 关于# 和 void的区别分析

    javascript 关于# 和 void的区别分析

    href 为#的跳到了自己的页面。原来‘#’代表的是 #top ,
    2009-10-10
  • js实现随机数字字母验证码

    js实现随机数字字母验证码

    这篇文章主要为大家详细介绍了js随机验证码的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Javascript添加监听与删除监听用法详解

    Javascript添加监听与删除监听用法详解

    这篇文章主要介绍了Javascript添加监听与删除监听用法,较为详细的分析了javascript原理与用法,并补充说明了事件监听的兼容性问题,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • 使用auto.js实现自动化每日打卡功能

    使用auto.js实现自动化每日打卡功能

    这篇文章主要介绍了使用auto.js实现自动化每日打卡,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • 关于div自适应高度/左右高度自适应一致的js代码

    关于div自适应高度/左右高度自适应一致的js代码

    在DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题,本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js
    2013-03-03
  • window.location和document.location的区别分析

    window.location和document.location的区别分析

    用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
    2008-12-12
  • JavaScript 显示一个倒计时广告牌的实现示例

    JavaScript 显示一个倒计时广告牌的实现示例

    本文主要介绍了JavaScript 显示一个倒计时广告牌的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS函数本身的作用域实例分析

    JS函数本身的作用域实例分析

    这篇文章主要介绍了JS函数本身的作用域,结合实例形式分析了JS函数作用域相关原理、操作技巧与使用注意事项,需要的朋友可以参考下
    2020-03-03

最新评论