JavaScript console.log %c %o %s %d %f

浅浅的花香味﹌ 2022-12-30 15:52 122阅读 0赞

## Intro ##

*  字符串拼接/占位符替换  
    几乎所有语言都有输出函数，当需要**快速拼接多个参数 然后输出**的时候，有各自的`printf`函数和`%xxx`占位符作为解决方案：
    
     *  C  
        `printf("age is %d\n", 23); // age is 23`
     *  Java  
        `System.out.printf("hello %s\n", "world"); // hello world`  
        `String.format("hello %s\n", "world");`
     *  Python  
        `print("hello %s %s"%("world", 123)) # hello world 123` 注意`%`和参数列表的小括号

JavaScript中的输出函数`console.log`也有这样的功能。  
(其实JS中的`console.log()`本来就可以依次传入不定数量个参数，完成输出)

## JavaScript 输出函数的占位符 ##

以下占位符和其他语言不完全相同：

%s 字符串(整数、小数也可以打印)
    %d 整数
    %f 小数
    
    %o 对象
    
    %c 后面字符串的样式

以上列表可能不全，只是我暂时接触过的，后面遇到新的会补充，也欢迎大家在评论区告诉我新的。感谢。

用法见下。

*  demo

console.log("s测试： %s-%s-%s-%s", "wuyujin", 1997, 123.456, { name:"aaa",age:22});
    
    console.log("d和f测试： %d-%f", 1997, 123.456);
    
    var obj = { name:"aaa", age:22, contact: { qq:123,wechat:"asd",tel:123456}};
    console.log("o测试： %o %O", obj, obj);
    
    var str = "%c hello %c world";
    var arg1 = "color: #fadfa3; background: #030307; padding:5px 0;";
    var arg2 = "background: pink; padding:5px 0;";
    console.log(str, arg1, arg2);

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]

## 应用 ##

之前讲 `console.log` 本身就可以一次性传入不定数量个参数，进行打印，那么`%xxx`之类的占位符还有存在的必要吗？  
有的，如下：

var name = "wuyujin";
    var birth = 1997;
    var score = 123.456;
    var info = { addr:"SH", age:23, concact: { tel:123,qq:456,wechat:"id123"}};

对以上信息拼接打印，有两种方式：

console.log("我的名字：", name, "，生于：", birth, "，成绩：", score, "，其他信息", info);
    console.log("我的名字：%s，生于：%d，成绩：%f，其他信息：%o", name, birth, score, info);

第二种更清晰(仅个人感觉，人与人观念可不同)。

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20221120/ed7b9103347f42edb794dde7e6ff9870.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201226190709135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70