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

news2024/11/25 10:50:27

在 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.coloradmin.cn/o/1444720.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Spring】Bean 的实例化方式

Spring 为 Bean 提供了多种实例化方式,通常包括4种方式 也就是说在 Spring 中为 Bean 对象的创建准备了多种方案,目的是:更加灵活 第一种:通过构造方法实例化 第二种:通过简单工厂模式实例化 第三种:通过…

【九章斩题录】Leetcode:判定是否互为字符重排(C/C++)

面试题 01.02. 判定是否互为字符重排 ✅ 模板:C class Solution { public:bool CheckPermutation(string s1, string s2) {} }; 「 法一 」排序 💡 思路:看到题目中说 "重新排列后能否变成另一个字符串",等等……重新…

读书笔记之《重塑大脑重塑人生》:大脑强大的可塑性

《重塑大脑重塑人生》作者是诺曼道伊奇,原作名: The Brain That Changes Itself: Stories of Personal Triumph from the Frontiers of Brain Science ,于 2015-1-20出版。 诺曼•道伊奇(Norman Doidge)是医学博士,精…

python + numpy test

1. 2. What is the correct syntax to output the type of a variable or object in Python? Syntax of the Python type() functionThe type() function 3. upper() 全大写 lower() 全小写 4. 接下来是Numpy部分 1. What is a correct syntax to check the number of di…

图(高阶数据结构)

目录 一、图的基本概念 二、图的存储结构 2.1 邻接矩阵 2.2 邻接表 三、图的遍历 3.1 广度优先遍历 3.2 深度优先遍历 四、最小生成树 4.1 Kruskal算法 4.2 Prim算法 五、最短路径 5.1 单源最短路径-Dijkstra算法 5.2 单源最短路径-Bellman-Ford算法 5.3 多源最…

一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架 - DncZeus

前言 今天给大家推荐一个基于.NET 7 Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架:DncZeus。 官方项目简介 DncZeus是一个基于 .NET 7 Vue.js 的前后端分离的通用后台管理系统框架。后端使用.NET 7 Entity Framework…

Qt视频播放器项目

一.创建项目 二.设计UI 按钮与名称的对应 打开视频按钮 -> pushButton_Open 播放按钮 -> pushButton_Play 暂停按钮 -> pushButton_Pause 停止按钮 -> pushButton_Stop 音量按钮 -> pushButton_Sound设置图标 在项目目录下创建images文件夹,把图标…

计算机毕业设计SSM基于的奶茶店预约订单系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: vue mybatis Maven mysql5.7或8.0等等组成,B…

Java实现固始鹅块销售系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固始鹅块模块2.4 鹅块订单模块2.5 评论管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 鹅块类型表3.2.2 鹅块表3.2.3 鹅块订单表3.2.4 鹅块评论表 四、系统展示五、核心代码5.…

13 年后,我如何用 Go 编写 HTTP 服务(译)

原文:Mat Ryer - 2024.02.09 大约六年前,我写了一篇博客文章,概述了我是如何用 Go 编写 HTTP 服务的,现在我再次告诉你,我是如何写 HTTP 服务的。 那篇原始的文章引发了一些热烈的讨论,这些讨论影响了我今…

Python静态方法和类方法的区别和应用

实际上,Python 完全支持定义类方法,甚至支持定义静态方法。Python 的类方法和静态方法很相似,它们都推荐使用类来调用(其实也可使用对象来调用)。 类方法和静态方法的区别在于,Python会自动绑定类方法的第…

【【C++类与对象(下)】】

1. 再谈构造函数 构造函数体赋值 在创建对象时,编译器会通过调用构造函数,给对象中的各个成员变量一个合适的初始值: class Date { public:// 构造函数Date(int year 0, int month 1, int day 1){_year year;_month month;_day day;}…

Acwing---836. 合并集合

合并集合 1.题目2.基本思想3.代码实现 1.题目 一共有 n n n 个数,编号是 1 ∼ n 1∼n 1∼n,最开始每个数各自在一个集合中。 现在要进行 m m m 个操作,操作共有两种: M a b,将编号为 a a a 和 b b b 的两个数所…

Netty应用(二) 之 ByteBuffer

目录 4.ByteBuffer详解 4.1 ByteBuffer为什么做成一个抽象类? 4.2 ByteBuffer是抽象类,他的主要实现类为 4.3 ByteBuffer的获取方式 4.4 核心结构(NIO的ByteBuffer底层是啥结构,以及读写模式都是根据这些核心结构进行维护的&a…

【JavaScript 漫游】【014】正则表达式通关

文章简介 JS 语言中的 RegExp 对象提供正则表达式的功能。本篇文章旨在对该对象的相关知识点进行总结。内容包括: 正则表达式概述RegExp 对象的实例属性RegExp 对象的实例方法字符串与正则表达式相关的实例方法正则表达式匹配规则 概述 正则表达式的概念 正则表…

linux 08 文件查找

02. 第一. alias 第二. locate: locate 找不到最近的文件 更新locate 后

Spring Cloud Hystrix 参数配置、简单使用、DashBoard

Spring Cloud Hystrix 文章目录 Spring Cloud Hystrix一、Hystrix 服务降级二、Hystrix使用示例三、OpenFeign Hystrix四、Hystrix参数HystrixCommand.Setter核心参数Command PropertiesFallback降级配置Circuit Breaker 熔断器配置Metrix 健康统计配置Request Context 相关参数…

Flink 2.0 状态存算分离改造实践

本文整理自阿里云智能 Flink 存储引擎团队兰兆千在 FFA 2023 核心技术(一)中 的分享,内容关于 Flink 2.0 状态存算分离改造实践的研究,主要分为以下四部分: Flink 大状态管理痛点 阿里云自研状态存储后端 Gemini 的存…

基于Java (spring-boot)的考勤管理系统

一、项目介绍 普通员工功能: (1)登录:员工进入界面后需要输入自己的账号密码进行登录。 (2)签到打卡:员工登录完成以后,可以进行签到打卡。 (3)修改密码&a…

mac卸载被锁定的app

sudo chflags -hv noschg /Applications/YunShu.app 参考:卸载云枢(MacOS 版)