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});

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

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

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

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

:%o和%O的区别

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

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

使用%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详解_脚本之家

你可能感兴趣的:(JavaScript学习笔记,前端,占位符,JS占位符,console)