Web development js string concatenation placeholder and conlose object API detailed explanation

Web development js string concatenation placeholder and conlose object API detailed explanation

Placeholder replacement

Console printing (conlose.log()) or splicing character replacement can be solved with the help of placeholders

%s string
%d / %i integer
%f Decimal (integers and decimals are both acceptable, recommended)
%o Object
%c The style of the string after

Example code:

// %s Example let s1 = 'love'
let s2 = 'Motherland'
console.log('001--I%s my%s', s1, s2) // -> I love my motherland // %f and %i, %d examples/*
    It is recommended to use %f, both integers and decimals are OK. %d can only output integers, and decimals will be ignored directly*/
let n1 = 100
let n2 = 5.8
console.log('002--I'm %d points away from %d points', n1, n2) // -> I'm 5 points away from 100 pointsconsole.log('002--I'm %i points away from %i points', n1, n2) // -> I'm 5 points away from 100 pointsconsole.log('003--I'm %f points away from %f points', n1, n2) // -> I'm 5.8 points away from 100 points// %oExamplelet o = { name: 'Kakashi', age: 25 }
console.log('004--The information of the ninja performing the mission is %o', o) // -> The information of the ninja performing the mission is {name: "Kakashi", age: 25}        
//%c example var str = '005--I am a %c example'
let st = 'color: #000; background-color: orange; padding: 5px;);'
console.log(str, st)
console.log(
    '006--%c---------------I am a separator-----------------',
    'color:red;font-size:10px'
)
ript>

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-fHD9IthG-1627465023483)(conlose/image-20210728170625837.png)]

Console Printing

Printing in the browser is not limited to conlose.log() ;

console object is a native object of JavaScript, which provides a variety of methods for interacting with the console window;

This section only lists the methods that I think are commonly used.

table()

The console.table method can convert composite data into a table for display.

let o = {
    username: "kakashi",
    age: 25,
    Skill:['Chidori', 'Earth Flow Wall', 'Sharingan']
}
console.table(o);

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-9cbDkCtF-1627465023486)(conlose/image-20210728172629214.png)]

log, info, warn, error

console.log('001--I am a normal output statement');
console.info('002--I am a normal information output statement');
console.warn('003--I am a warning output statement');
console.error('004--I am an error output statement');

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-jluA4C5G-1627465023487)(conlose/image-20210728172305658.png)]

group(), groupCollapsed(), groupend()

console.group() and console.groupend() are used to group displayed information, which is suitable for outputting a large amount of information.

console.group() will expand the output information of this group by default

console.groupend() will close the output information of this group by default

console.group('First round of output')
console.log('I am the first round of output statement 1')
console.log('I am the first round of output statement 2')
console.log('I am the first round of output statement 3')
console.log('I am the first round of output statement 3')
console.groupEnd()

console.groupCollapsed('First round of output')
console.log('1 is output again')
console.log('2 is output again')
console.log('Another 3 is going to be output')
console.groupEnd()

console.log('last output')

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-XZN4LuIZ-1627465023489)(conlose/image-20210728173352647.png)]

The above is the detailed content of the web string concatenation placeholder and conlose object API. For more information about web string placeholders and conlose object API, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • A brief discussion on the implementation principle of Webpack4 plugins
  • Web project development JS function anti-shake and throttling sample code
  • Multiple solutions for cross-domain reasons in web development
  • js to realize web message board function
  • JavaScript article will show you how to play with web forms
  • JavaScript web page entry-level development detailed explanation

<<:  How to implement Nginx reverse proxy and load balancing (based on Linux)

>>:  MySQL character set viewing and modification tutorial

Recommend

Example of how to adapt the Vue project to the large screen

A brief analysis of rem First of all, rem is a CS...

How to add Vite support to old Vue projects

1. Introduction I have taken over a project of th...

Some references about colors in HTML

In HTML, colors are represented in two ways. One i...

Detailed steps to build a file server in Windows Server 2012

The file server is one of the most commonly used ...

Analysis of MySQL multi-table joint query operation examples

This article describes the MySQL multi-table join...

Briefly describe the difference between MySQL and Oracle

1. Oracle is a large database while MySQL is a sm...

HTML code example: detailed explanation of hyperlinks

Hyperlinks are the most frequently used HTML elem...

Detailed explanation of Vue project optimization and packaging

Table of contents Preface 1. Routing lazy loading...

Vue uses ECharts to implement line charts and pie charts

When developing a backend management project, it ...

Web page header optimization suggestions

Logo optimization: 1.The logo image should be as ...

Solution to interface deformation when setting frameset height

Currently I have made a project, the interface is ...

MySQL series tutorials for beginners

Table of contents 1. Basic concepts and basic com...

MySql 8.0.11-Winxp64 (free installation version) configuration tutorial

1. Unzip the zip package to the installation dire...

linux No space left on device 500 error caused by inode fullness

What is an inode? To understand inode, we must st...

Vue v-model related knowledge summary

​v-model is a Vue directive that provides two-way...