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的资料请关注脚本之家其它相关文章!

相关文章

  • 原生微信小程序开发中 redux 的使用详解

    原生微信小程序开发中 redux 的使用详解

    这篇文章主要介绍了原生微信小程序开发中 redux 的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • 微信小程序云开发(数据库)详解

    微信小程序云开发(数据库)详解

    使用云开发开发微信小程序、小游戏,无需搭建服务器,这篇文章主要为大家详细介绍了微信小程序云开发数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • D3.js实现散点图和气泡图的方法详解

    D3.js实现散点图和气泡图的方法详解

    这篇文章将会给大家介绍了另外两种可视化图表,利用D3.js实现散点图和气泡图,文章通过多个方面介绍的非常详细,下面来一起看看吧。
    2016-09-09
  • JavaScript模块化原理深入分析

    JavaScript模块化原理深入分析

    JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块,那么需要通过指定语法来引入要使用的模块,而且只能使用引入模块所暴露的内容
    2022-11-11
  • 浅谈通过JS拦截 pushState和replaceState事件

    浅谈通过JS拦截 pushState和replaceState事件

    下面小编就为大家带来一篇浅谈通过JS拦截 pushState和replaceState事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js实现简单随机抽奖的方法

    js实现简单随机抽奖的方法

    这篇文章主要介绍了js实现简单随机抽奖的方法,涉及字符串的操作、setInterval定时调用等技巧,需要的朋友可以参考下
    2015-01-01
  • javascript动态向网页中添加表格实现代码

    javascript动态向网页中添加表格实现代码

    动态向网页中添加表格的方法有很多,本文为大家介绍下利用javascript是如何实现的
    2014-02-02
  • Javascript 异步加载详解(浏览器在javascript的加载方式)

    Javascript 异步加载详解(浏览器在javascript的加载方式)

    本文总结一下浏览器在 javascript 的加载方式,需要的朋友可以参考下
    2012-05-05
  • 如何在CocosCreator里画个炫酷的雷达图

    如何在CocosCreator里画个炫酷的雷达图

    这篇文章主要介绍了如何在CocosCreator里画个炫酷的雷达图,对Graphics感兴趣的同学,一定要看看,并且把代码实践一下
    2021-04-04
  • 一文带你搞懂JavaScript中数组的特性

    一文带你搞懂JavaScript中数组的特性

    数组是几乎所有编程语言的基础语法,JavaScript因为语法特性,我们更需要理解数组知识。本文从JavaScript中数组的一些特殊之处入手,通过这些少有特性的详细介绍,加深我们对数组的理解
    2023-04-04

最新评论