JS中常用占位符使用方法详解_ |%s|%d|%f|%o|%O|%c|

在 JavaScript 中,%s 是一种字符串格式化占位符,用于将字符串插入到另一个字符串中的指定位置。这种方法基于 C 语言的 printf() 函数,但在 JavaScript 中有一些变化。

在 JavaScript 中,%s 可以接受任何类型的值,并将其转换为字符串类型。例如:

const name = 'John';
const age = 30;
// 输出:My name is John, and I am 30 years old.
console.log('My name is %s, and I am %s years old.', name, age);// 直接用于字符串参数输出
console.log("%s","first","second"); // 输出结果:first second
// 将对象转换为普通字符串后执行
console.log("%s","zzk",{name:"zzk"}); // 输出结果:zzk { name: 'zzk' }

在上述代码中,%s 占位符被替换为字符串类型的变量 name 和 age 的值。注意,在使用模板字符串时,也可以使用 ${} 来插入变量,例如:

const name = 'John'; 
const age = 30; 
// 输出:My name is John, and I am 30 years old. 
console.log(`My name is ${name}, and I am ${age} years old.`); 

在大多数情况下,使用 ${} 会更方便和易读,但在一些旧的代码库或遗留代码中,可能会看到使用 %s 的字符串格式化语法。

在 JavaScript 中,除了常见的 %s 以外,还有其他的占位符,包括:

%d用于表示数字类型的占位符,例如:

// 直接用于数值参数输出
console.log('My age is %d', 30); // 输出:My age is 30// 将字符串作为数值进行转换
console.log("%d","25.6"); // 输出结果:25.6
console.log("%d","zzk"); // 输出结果:zzk

%i和%d 没有区别,%i 是老式写法,都是整型格式。

C语言中 %d 与 %i 的区别:

  • 在printf格式串中使用时,没有区别。
  • 在scanf格式串中使用时,有一点区别:在scanf格式中,%d只与十进形式的整数相匹配。而%i可以匹配八进制、十进制、十六进制表示的整数。

%f用于表示浮点型数字类型的占位符,例如:

console.log('My weight is %f kg', 65.5); // 输出:My weight is 65.5 kg

%o:用于表示对象类型的占位符,例如:

const person = { name: 'John', age: 30 }; 
​​​​​​​// 输出:{name: "John", age: 30} 
console.log('%o', person); // 输出:Server running on {port: 9090}
console.log('Server running on %o', {port: 9090});

%O:与 %o 相似,用于表示对象类型的占位符,区别在于它会以更易读的方式输出对象,例如:

const person = { name: 'John', age: 30 };
​​​​​​​// 输出: // { // age: 30, // name: "John" // }
console.log('%O', person);

:%o和%O的区别

%o、%O都是用来输出Object对象的,对普通的Object对象,两者没区别,但是打印dom节点时不一样:

使用%o输出和不使用格式化输出打印出来的结果一样,你可以查看这个dom节点的内容、子节点等;而使用%O,你看到的则是该dom节点各个对象属性

参考:浏览器控制台常用命令小结之console.log信息输出

%c:用于在控制台输出带有样式的文本(CSS 格式字符串),例如:

​​​​​​​// 输出:在控制台中输出红色字体,大小为20px的 Hello World 
console.log('%cHello World', 'color: red; font-size: 20px;'); 

这些占位符可以帮助开发者在调试过程中更方便地输出相关信息,从而更加高效地解决问题。

参考资料

浏览器控制台常用命令小结之console.log信息输出

JS占位符及其多种用途_设计学院 | JS字符串拼接占位符及conlose对象Api详解_脚本之家

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/471687.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python四级考试笔记

Python四级考试笔记【源源老师】 四级标准 一、 理解函数及过程、函数的参数、函数的返回值、变量作用域等概念。 二、 能够创建简单的自定义函数。 三、 理解算法以及算法性能、效率的概念,初步认识算法优化 效率的方法。 四、 理解基本算法中递归的概念。 五、 掌…

2024龙年特别篇 -- 魔法指针 之 指针开篇

你是否为 指针,指针变量,const修饰指针,野指针而感到困惑和不理解,接下来就让白子寰同学为你详细讲解!!! 注:该文章图片引用了小hong书博主:IT局内人 目录 指针 概念 计算机常见单位转换 指…

分享72个Html前端模板,总有一款适合您

分享72个Html前端模板,总有一款适合您 72个Html前端模板下载链接:https://pan.baidu.com/s/1ZVhDy6aMGc9fBl447d69yg?pwd8888 提取码:8888 Python采集代码下载链接:采集代码.zip - 蓝奏云 学习知识费力气,收集…

【HTML】过年不能放烟花,那就放电子烟花

闲谈 大家回家过年可能都多多少少放过些🧨,但是有些在城市上过年的小伙伴可能就没有机会放鞭炮了。不过没关系,我们懂技术,我们用技术自娱自乐,放电子烟花,总不可能被警长叔叔敲门问候吧。 开干 首先&…

数据类型与变量

目录 作业回顾 有关JDK, JRE, JVM三者: 判断题 新课学习 字面常量 数据类型 变量 整型变量 长整型变量 短整型变量 字节型变量 浮点型变量 字符型变量 布尔型变量 类型转换 自动类型转换(隐式) 强制类型转换(显式…

透光力之珠——光耦固态继电器的独特特点解析

光耦固态继电器作为现代电子控制领域中的重要组件,以其独特的特点在工业、通信、医疗等多个领域得到广泛应用。本文将深入剖析光耦固态继电器的特点,揭示其在电子控制中的卓越性能。 光耦固态继电器的光电隔离技术 光耦固态继电器以其光电隔离技术而脱颖…

IIC--集成电路总线

目录 一、IIC基础知识 1、设计IIC电路的原因: 2、上拉电阻阻值怎么确定 3、IIC分类 4、IIC协议 二、单片机使用IIC读写数据 1、 IIC发送一个字节数据: 2、IIC读取一个字节数据: 一、IIC基础知识 1、设计IIC电路的原因: (…

semantic-kernel 国内代理的配置(详细教程)

1. semantic-kernel概述 Semantic Kernel 是微软提供的一个工具,旨在帮助开发者快速、轻松地将最新的大型语言模型(LLM)技术集成到应用程序中。这意味着通过使用Semantic Kernel,开发者可以在他们的应用中加入先进的人工智能和自然语言理解能力,从而增强应用的功能性。 …

相机图像质量研究(16)常见问题总结:光学结构对成像的影响--IRCUT

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结:光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结:光学结构对成…

[职场] 事业单位医疗岗常见的面试题目 #微信#微信#微信

事业单位医疗岗常见的面试题目 面试是步入社会以及就业过程中必须经历的一个首要阶段,也是实现就业必经的之道,可以说面试是双向选择和考试考核评价的过程,是企业选择应聘者的同时也应聘者也在选择企业。 一.常见的面试题目 1.对医学基础知…

BUGKU-WEB 网站被黑

题目描述 题目截图如下: 进入场景看看: 解题思路 提示说: 网站被黑了 黑客会不会留下后门(那就是留了)那就扫描目录先看看再说发现确实有登入界面,但是密码不知道(爆破走起) …

AJAX——URL查询参数

1 URL查询参数 定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据 语法:http://xxxx.com/xxx/xxx?参数名1值1 & 参数名2值2 2 axios-查询参数 语法:使用axios提供的 params 选项 注意:axios在…