Printing Javascript Template Strings with Line Breaks

Question

Is there a way to print (using console.log) javascript template strings, applying the substitutions when it's the case, but considering the linebreaks '\n' when printing?

For instance, when I have the following:

let someVar = 'a';

let tsString = `here goes ${someVar} 
some other line
some other line`;

console.log(tsString);

I'd like it to print WITH the linebreaks, not printing the \n's instead.

I think there could be some transformation between template strings and regular strings, but I could not find it.

*** EDIT: It happens on Terminal, not browser. Running a NodeJS app. Sorry for not specifying that, I assumed that what I wanted would be JS-specific, not node's (at least the solution).

Due to the way strings are parsed by HTML parsers, all unnecessary whitespace is removed (meaning line breaks). Is this simply a console annoyance? — Randy Casburn, Mar 23 '18 at 18:50
@RandyCasburn As the question specifically refers to `console.log` that should not be an issue. — H.B., Mar 23 '18 at 18:52
@H.B. - I get that, but you never know. If this is a console annoyance, it's a waste of time to even be here. But if it is a misunderstand between what is rendered in an HTML view vs. what is rendered in the console, perhaps we can help. Make sense? — Randy Casburn, Mar 23 '18 at 18:54
Maybe it's a browser thing, but with Safari it is on 3 lines. And if \n's are put in the string it then prints on 3 lines without displaying \n. — QuentinUK, Feb 18 '20 at 15:42

pourmesomecode · Answer 1 · 2020-02-20T09:24:44.267

I think it may be related to the OS you're using since Windows and Mac have different character lengths for their line endings.

To answer the particular question which seems to work for me.

const os = require('os');

let someVar = 'a';

let tsString = `here goes ${someVar} ${os.EOL} some other line ${os.EOL} some other line`;

console.log(tsString);

You can read about the os middleware on the nodejs docs here: https://nodejs.org/api/os.html#os_os_eol

This seems to be a similar duplicate of: How do I create a line break in a JavaScript string to feed to NodeJS to write to a text file?

score 2 · Answer 2 · answered Feb 18 '20 at 16:13

Another solution besides adding to the string \n, which is the standard solution is as follows:

You've got there a character for new line:

(I cannot paste that character in here as the markdown kills it)

You could capture it in a variable and insert it in a template string:

const newline = tsString[12];
const myString = `Hello ${newline} World!`;

Hope it helps.

score 2 · Answer 3 · answered Feb 20 '20 at 03:52

You should try replacing the EOL based on where you are taking the content, forms as a standard should support the CRLF \r\n as per the spec (https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4)

Use the following regex to replace all occurences. \n would match EOL and /gm would match all

let someVar = 'a';

let tsString = `here goes ${someVar} 
some other line
some other line`;

//For terminal (detects EOL on it's own)
console.log(tsString);
let txtString = tsString.replace(/\n/gm, `\r\n`);
// Works in terminal and in textarea
console.log(txtString); 
//For html content, redundant but if it's just html you want!
let htmlString = tsString.replace(/\n/gm, `<br>`);
console.log(htmlString);

score 0 · Answer 4 · answered Feb 24 '20 at 19:42

You can embed the data inside string like

const myTemplateString = My sample text 1 is ${one} My second line 2 is ${two}

console.log(myTemplateString) the ES6 will preserve white spaces and hence you can get the required line breaks. refer this article

Printing Javascript Template Strings with Line Breaks

4 Answers4