前言:
最近一个很好的前端同事问到了一个问题:你说说怎么重写console.log
使其每次打印都带上当前日期? 刚听到时我思考了一下心想:还有这么奇葩的题目???然后特意去看了一下文档,确实可以重写成自己喜欢的样式,还挺有意思的。既然有意思然后当然就写个文章分享啦。
一、什么是conlose.log占位符?
我们浏览器用
conlose.log
其实是可以改变样式的,甚至添加图片。 官方主要有提供五个占位符去控制conlose.log
的,支持的占位符格式如下:
- 字符串:
%s
- 整数:
%d
- 浮点数:
%f
- 对象:
%o
或%O
CSS
样式:%c
我们重写console.log
主要用到的是%c
占位符个性化去调整样式。
二、%c占位符改变样式的基本使用
直接上代码和效果例子:
(1)通过
%c
能调整打印内容的css
样式,并且只有%c
后面的内容才会生效。
console.log(`看看%c效果`, `color: red;font-size: 24px;`)
(2)样式后面接着写内容会拼接上去,并且默认样式
console.log(`看看%c效果`, `color: red;font-size: 24px;`, '再说吧')
(3)可以用
css
的background
插入图片效果
let img = 'data:image/png;base64,iVBO........'
console.log('%c ', `padding: 16px; background: url(${img}) 100% / contain no-repeat;`, '看看内容先');
这里有两个注意点:
%c
后面必须插入至少一个字符,所以这里加了一个空格;console.log
中 的css
不能支持width
和height
,所以这里用padding
设置宽度和高度。- 我试了几次,好像
base64
格式图片才行???
三、自己封闭一个返回当前日期的console.log
首尾呼应开头问题,其实就是和普通函数封闭的思维是一样,动态传参修改样式,不传就取默认值
export function formatDate(date = new Date()) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
export function logDate(str, color = 'red', fontSize = '12px') {
const currentDate = formatDate();
console.log(`%c${currentDate}: ${str}`, `color: ${color}; font-size: ${fontSize}; border:1px solid teal; font-weight: 600`);
}
封装好之后使用的时候如下引入并且使用
<script setup>
import { logDate } from '@/utils/formatDate';
function dateHandler() {
logDate(`封装带日期的log!`);
}
</script>
小结:
重写的确实比较随意简单,主要就是看个思路知道能这么玩,如果写的不好希望能指出问题啊。