Line endings (also known as Newlines) in JS strings

Question

It is well known, that Unix-like system uses LF characters for newlines, whereas Windows uses CR+LF.

However, when I test this code from local HTML file on my Windows PC, it seems that JS treat all newlines as separated with LF. Is it correct assumption?

var string = `
    foo




    bar
`;

// There should be only one blank line between foo and bar.

// \n - Works
// string = string.replace(/^(\s*\n){2,}/gm, '\n');

// \r\n - Doesn't work
string = string.replace(/^(\s*\r\n){2,}/gm, '\r\n');

alert(string);

// That is, it seems that JS treat all newlines as separated with 
// `LF` instead of `CR+LF`?

Extortionate

What's weird? linebreaks are not converted automatically when you open in another OS. – Avery

What editor are you using, a half decent editor won't care. – Galvez

Do you retrieve your code via a Git client? There is a setting to convert ` \r\n` automatically. There are also some editors that do a similar thing. – Instable

@Instable No, I don't use Git (I'm not fulltime developer, it's just a hobby). The question itself is more about research, self-education, rather then solving some real problem. – Extortionate

Answer 1

I think I found an explanation.

You are using an ES6 Template Literal to construct your multi-line string.

According to the ECMAScript specs a

.. template literal component is interpreted as a sequence of Unicode code points. The Template Value (TV) of a literal component is described in terms of code unit values (SV, 11.8.4) contributed by the various parts of the template literal component. As part of this process, some Unicode code points within the template component are interpreted as having a mathematical value (MV, 11.8.3). In determining a TV, escape sequences are replaced by the UTF-16 code unit(s) of the Unicode code point represented by the escape sequence. The Template Raw Value (TRV) is similar to a Template Value with the difference that in TRVs escape sequences are interpreted literally.

And below that, it is defined that:

The TRV of LineTerminatorSequence::<LF> is the code unit 0x000A (LINE FEED).
The TRV of LineTerminatorSequence::<CR> is the code unit 0x000A (LINE FEED).

My interpretation here is, you always just get a line feed - regardless of the OS-specific new-line definitions when you use a template literal.

Finally, in JavaScript's regular expressions a

\n matches a line feed (U+000A).

which describes the observed behavior.

However, if you define a string literal '\r\n' or read text from a file stream, etc that contains OS-specific new-lines you have to deal with it.

Here are some tests that demonstrate the behavior of template literals:

`a
b`.split('')
  .map(function (char) {
    console.log(char.charCodeAt(0));
  });

(String.raw`a
b`).split('')
  .map(function (char) {
    console.log(char.charCodeAt(0));
  });
  
 'a\r\nb'.split('')
  .map(function (char) {
    console.log(char.charCodeAt(0));
  });
  
"a\
b".split('')
  .map(function (char) {
    console.log(char.charCodeAt(0));
  });

Interpreting the results:
char(97) = a, char(98) = b
char(10) = \n, char(13) = \r

Instable

It is incorrect that Google's JavaScript Style Guide recommends not to use template literals. They recommend against using line continuations (backslash escaped line endings,) and do recommend using template literals for multi-line strings over line continuations or string contatenation. The guide linked in the answer is the ES5 version when template literals did not yet exist. – Priapic

@Priapic yea, I cannot trace back what was in this recommendation three years ago and removed the link. The style guide shouldn't have been part of the answer anyway. Thanks. I am going to delete these comments after a while since they are now meaningless. – Instable

Answer 2

You could use the regular expression: /^\s*[\r\n]/gm

Code example:

let string = `
    foo




    bar
`;

string = string.replace(/^\s*[\r\n]/gm, '\r\n');

console.log(string);

Arbe

Useful, upvoted! But actually my question is about "what's going on here?" instead of "how to solve it?". – Extortionate