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

目录
  • 占位符替换
  • 控制台打印
    • table()
    • log、info、warn、error
    • group()，groupCollapsed()，groupend()

占位符替换

控制台打印(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>

控制台打印

在浏览器打印, 并不只有 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字符串拼接占位符及conlose对象Api详解的详细内容，更多关于web字符串占位符及conlose对象Api的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • javascript中字符串拼接详解

    最近在研究<javascript高级程序设计>中,有一段关于字符串特点的描述,原文大概如下:ECMAScript中的字符串是不可变的,也就是说,字符串一旦创建,他们的值就不能改变.要改变某个变量的保存的的字符串,首先要销毁原来的字符串,然后再用另外一个包含新值的字符串填充该变量,例如: 复制代码 代码如下: var lang = "Java"; lang = lang + "Script"; 实现这个操作的过程如下:首先创建一个能容纳10个字符的新字符串

  • js两种拼接字符串的简单方法(必看)

    如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var

  • JavaScript中使用concat()方法拼接字符串的教程

    这种方法将两个或多个字符串,并返回一个新的单字符串. 语法 string.concat(string2, string3[, ..., stringN]); 下面是参数的详细信息: string2...stringN : 这些是要连接字符串. 返回值: 返回一个连接字符串. 例子: <html> <head> <title>JavaScript String concat() Method</title> </head> <body>

  • javascript字符串对象常用api函数小结(连接,替换,分割,转换等)

    本文实例讲述了javascript字符串对象常用api函数.分享给大家供大家参考,具体如下: 1. concat(str1,str2,···) 连接字符串 2. indexOf(str,start) 返回 str 在字符串中首次出现的位置 var str = "hello world"; str.indexOf("hello"); // 0 str.indexOf("o",5); // 7 str.indexOf("World"

  • JS如何定义用字符串拼接的变量

    今天在写js的时候碰到了难题,我又一个页面需要生成很多的变量.但是变量的名称是根据参数的不同而区分的. 例如可能需要生成 date_1,date_2,datet_3... (后面的数字是根据参数来的). 所以我的函数名 应该由 var name = "test_"+num; 生成函数名 但这问题就来了. 1可以使用 window[name] = " " 这种方式来定义变量: 所以 var "test_"+num = 100; 这中肯定是错误的.后

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

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

    目录 占位符替换 控制台打印 table() log.info.warn.error group(),groupCollapsed(),groupend() 占位符替换 控制台打印(conlose.log())或者拼接字符换, 可以借助占位符解决 %s    字符串 %d  / %i    整数 %f    小数(整数.小数都可以, 推荐) %o    对象 %c    后面字符串的样式 示例代码: // %s示例 let s1 = '爱' let s2 = '祖国' console.log('

  • web开发之对比时间大小的工具函数的实例详解

    web开发之对比时间大小的工具函数的实例详解 js时间大小比较,格式yyyy-MM-dd hh:mm:ss 把时间比较封装成一个工具函数: /** * 比较两个时间的大小 * 时间格式:yyyy-MM-dd hh:mm:ss * @param {Object} beginTime 开始时间 * @param {Object} endTime 结束时间 */ var getDataLarge = function(beginTimeString,endTimeString){ var b = be

  • Java字符串格式化,{}占位符根据名字替换实例

    我就废话不多说了,大家还是直接看代码吧~ import java.beans.PropertyDescriptor; import java.lang.reflect.Method; import java.util.HashMap; import java.util.Map; import java.util.regex.Matcher; import java.util.regex.Pattern; public class StringFormatUtil { private static

  • Node.js API详解之 util模块用法实例分析

    本文实例讲述了Node.js API详解之 util模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 util util 模块主要用于支持 Node.js 内部 API 的需求.提供了大部分实用工具. 通过 const util = require('util'); 的方式引用util模块 util.callbackify(original) 说明: original:传递一个 async 函数,或者是一个返回Promise的异步函数. callbackify会返回一个方

  • Android开发之基本控件和四种布局方式详解

    Android开发之基本控件和四种布局方式详解

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

  • Node.js API详解之 console模块用法详解

    本文实例讲述了Node.js API详解之 console模块用法.分享给大家供大家参考,具体如下: console模块简介 说明: console 模块提供了一个简单的调试控制台,类似于 Web 浏览器提供的 JavaScript 控制台. console 模块导出了两个特定的组件: 一个 Console 类,包含 console.log() . console.error() 和 console.warn() 等方法,可以被用于写入到任何 Node.js 流. 一个全局的 console 实

  • JS前端中的设计模式和使用场景示例详解

    目录 引言 策略模式 1.绩效考核 2.表单验证 策略模式的优缺点: 代理模式 1.图片懒加载: 2.缓存代理 总结 引言 相信大家在日常学习和工作中都多多少少听说/了解/使用过 设计模式,我们都知道,使用恰当的设计模式可以优化我们的代码,那你是否知道对于前端开发哪些 设计模式 是日常工作经常用到或者必须掌握的呢?本文我将带大家一起学习下前端常见的设计模式以及它们的 使用场景!!! 本文主讲: 策略模式 代理模式 适合人群: 前端人员 设计模式小白/想知道如何在项目中使用设计模式 策略模式 策略

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • vue.js的状态管理vuex中store的使用详解

    一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

  • Node.js API详解之 assert模块用法实例分析

    本文实例讲述了Node.js API详解之 assert模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 assert assert 模块提供了断言测试的函数,用于测试不变式. 断言是编程术语,表示为一些布尔表达式,程序员相信在程序中的某个特定点该表达式值为真, 可以在任何时候启用和禁用断言验证,因此可以在测试时启用断言而在部署时禁用断言. 同样,程序投入运行后,最终用户在遇到问题时可以重新启用断言. 使用断言可以创建更稳定.品质更好且不易于出错的代码. 当需要在一个值为

随机推荐