web開發(fā)js字符串拼接占位符及conlose對象Api詳解

更新時間：2021年09月24日 16:55:50 作者：SpringSir

本篇文章主要為大家介紹了web開發(fā)中字符串的拼接，占位符的使用以及conlose對象Api的使用，有需要的朋友可以借鑒參考下，希望可以有所幫助

占位符替換

控制臺打印(conlose.log())或者拼接字符換, 可以借助占位符解決

%s   字符串
%d / %i    整數(shù)
%f   小數(shù)(整數(shù)、小數(shù)都可以, 推薦)
%o   對象
%c   后面字符串的樣式

示例代碼:

// %s示例
let s1 = '愛'
let s2 = '祖國'
console.log('001--我%s我的%s', s1, s2) // -> 我愛我的祖國       
// %f 和 %i、%d示例
/*
    推薦用 %f, 整數(shù)小數(shù)都沒問題
    %d只能輸出整數(shù),如果有小數(shù)會直接忽略
*/
let n1 = 100
let n2 = 5.8
console.log('002--我離考%d分還差%d分', n1, n2) // -> 我離考100分還差5分
console.log('002--我離考%i分還差%i分', n1, n2) // -> 我離考100分還差5分
console.log('003--我離考%f分還差%f分', n1, n2) // -> 我離考100分還差5.8分        
// %o示例
let o = { name: '卡卡西', age: 25 }
console.log('004--執(zhí)行任務(wù)忍者的資料是%o', o) // -> 執(zhí)行任務(wù)忍者的資料是{name: "卡卡西", age: 25}        
// %c示例
var str = '005--我是一個%c示例'
let st = 'color: #000; background-color: orange; padding: 5px;);'
console.log(str, st)
console.log(
    '006--%c---------------我是分隔符-----------------',
    'color:red;font-size:10px'
)
ript>

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-fHD9IthG-1627465023483)(conlose/image-20210728170625837.png)]

控制臺打印

在瀏覽器打印, 并不只有 conlose.log() 這一種方式;

console對象是JavaScript的原生對象, 它提供了多種方法，用來與控制臺窗口互動;

本節(jié)只列舉我認(rèn)為的常用方法.

table()

復(fù)合類型的數(shù)據(jù)，console.table方法可以將其轉(zhuǎn)為表格顯示。

let o = {
    username: "卡卡西",
    age: 25,
    skill:['千鳥','土流壁','寫輪眼']
}
console.table(o);

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-9cbDkCtF-1627465023486)(conlose/image-20210728172629214.png)]

log、info、warn、error

console.log('001--我是一條普通的輸出語句');
console.info('002--我是一條普通信息輸出語句');
console.warn('003--我是一條警告輸出語句');
console.error('004--我是一條錯誤輸出語句');

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jluA4C5G-1627465023487)(conlose/image-20210728172305658.png)]

group()，groupCollapsed()，groupend()

console.group() 和 console.groupend() 用于將顯示的信息分組, 適用于大量輸出信息的時候

console.group() 會默認(rèn)把本組輸出信息展開

console.groupend() 會默認(rèn)把本組輸出信息收起

console.group('第一輪輸出')
console.log('我是第一輪輸出語句1')
console.log('我是第一輪輸出語句2')
console.log('我是第一輪輸出語句3')
console.log('我是第一輪輸出語句3')
console.groupEnd()

console.groupCollapsed('第一輪輸出')
console.log('又要輸出了1')
console.log('又要輸出了2')
console.log('又要輸出了3')
console.groupEnd()

console.log('最后一次輸出')

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-XZN4LuIZ-1627465023489)(conlose/image-20210728173352647.png)]