When tracing out variables in the console, How to create a new line?

Question

So I'm trying to do something simple, I want to break up my traces in the console into several lines, using 1 console.log statement:

console.log('roleName = '+roleName+' role_ID = '+role_ID+' modal_ID = '+modal_ID+\n+'related = '+related);

How would you write the above to trace out the following?

roleName = test
role_ID = test
modal_UD = test
related = test

instead of roleName = test role_ID = test modal_UD = test related = test

I've checked out several other questions which appear similar, but none have helped or are talking about a different thing.

Thanks for taking a look!

Solution 1

In ES6/ES2015 you can use string literal syntax called template literals. Template strings use backtick character instead of single quote ' or double quote marks ". They also preserve new line and tab

const roleName = 'test1';
const role_ID = 'test2';
const modal_ID = 'test3';
const related = 'test4';
        
console.log(`
  roleName = ${roleName}
  role_ID = ${role_ID}
  modal_ID = ${modal_ID}
  related = ${related}
`);

Solution 2

You should include it inside quotes '\n', See below,

console.log('roleName = '+roleName+ '\n' + 
             'role_ID = '+role_ID+  '\n' + 
             'modal_ID = '+modal_ID+ '\n' +  
             'related = '+related);

Solution 3

Easy, \n needs to be in the string.

Solution 4

Why not just use separate console.log() for each var, and separate with a comma rather than converting them all to strings? That would give you separate lines, AND give you the true value of each variable rather than the string representation of each (assuming they may not all be strings).

console.log('roleName',roleName);
console.log('role_ID',role_ID);
console.log('modal_ID',modal_ID);
console.log('related',related);

And I think it would be easier to read/maintain.

Solution 5

You need to add the new line character \n:

console.log('line one \nline two')

would display:

line one

line two

View more solutions

Comments

[Leon Gaban]

Sweet this was it thanks! I needed to see how it was written out

[Leon Gaban]

I was looking for a way to format the code like how @Vega wrote it... more cleaner imho