2

I was reading about template literals in the ES2015 spec which allows you to create (among other things) line breaks like so:

var brokenStr = `This is
    a broken
    string.`; //This is a broken string

We can also break a string literal with the backslash \ character.

var anotherBrokenStr = 'This is \
    also a broken \
    string.'; //This is also a broken string.

Is there a performance difference between the two? Which is considered best practice?

I have searched SO.

Update:

When I output as follows, I get a single line.

document.getElementById('logger').innerHTML = brokenStr;

When I use document.write() I get this in Chrome inspector:

This is     also a broken     string.

Which colapses the whitespace to a single space in the browser/

Update: Update:

It appears that the template literal includes a \n character. Then, is there any difference between the first example and this, or is it just syntax sugar?

var anotherBrokenStr = 'This is \\n
    also a broken \\n
    string.';
Graham
  • 7,431
  • 18
  • 59
  • 84
littlewolf
  • 173
  • 1
  • 2
  • 19
  • 2
    In the first case you'd get line breaks in your string. In the second case you wouldn't get any line breaks. It's just a way to continue the string on the next line. – Aadit M Shah Sep 20 '16 at 18:51
  • http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Long_literal_strings – Bergi Sep 20 '16 at 18:55
  • 1
    If you're worried about performance then don't be. Thinking about performance in this case is a [premature optimization](http://c2.com/cgi/wiki?PrematureOptimization). – Aadit M Shah Sep 20 '16 at 18:56
  • 2
    One inserts new lines, the other explicitly doesn't. They aren't the same thing, so comparing their performance makes no sense. – user229044 Sep 20 '16 at 18:57
  • Thanks guys! Why does my browser input it as a single line then? `document.getElementById('logger').innerHTML = brokenStr;` – littlewolf Sep 20 '16 at 19:00
  • 3
    HTML does not respect the newline character .. inspect the string in the console and you will see it differently – Sam Redway Sep 20 '16 at 19:04
  • 1
    @AaditMShah there is also [this handy chart](https://xkcd.com/1691/) one can use to determine if they are prematurely optimising. – VLAZ Sep 20 '16 at 19:08
  • @AaditMShah I suppose the optimization part is null... I am interested in the differences though. – littlewolf Sep 20 '16 at 19:13
  • @littlewolf it's been repeatedly stated - first one has new lines, the second one doesn't. What other difference are you looking for? – VLAZ Sep 20 '16 at 19:14
  • When does `\n` respect the newline then? – littlewolf Sep 20 '16 at 19:18
  • and if the template parses to that? Why is it invalid? This is confusing me more... – littlewolf Sep 20 '16 at 19:18
  • @littlewolf if you print it in the console. If you put it in a text area. In a `
    ` tag...
     – VLAZ Sep 20 '16 at 19:19
  • I think my misunderstanding traces back to how HTML is rendered rather than the JS. Thanks, I'm marking this as answered. – littlewolf Sep 20 '16 at 19:21
  • Indeed. You finally got it. I updated my answer to explain the concept to you but it seems like that won't be necessary now. – Aadit M Shah Sep 20 '16 at 19:23
  • @AaditMShah It may help other users. – littlewolf Sep 20 '16 at 19:25

1 Answers1

4

Here's the output of my Node.js REPL showing the difference between the two:

> `hello
... world`
'hello\nworld'
> 'hello\
... world'
'helloworld'

In the first case we get a newline between 'hello' and 'world'. In the second case we don't.

Edit: Dear Lord, you're thoroughly confused.

HTML doesn't

respect newlines.


It doesn't matter how many newlines



you put in between your lines.




HTML will still print it





as a single line.

Hope that makes things clear.

Aadit M Shah
  • 72,912
  • 30
  • 168
  • 299
  • In the example above there is a whitespace before the backslash character `hello \ ` although, why is Node adding a `\n`? It should output to a single unbroken line. It does in my browser... – littlewolf Sep 20 '16 at 18:57
  • @littlewolf: The template literal literally contains line breaks. What browser are you using? Chrome clearly shows the line breaks (not encoded but literally). – Felix Kling Sep 20 '16 at 18:59
  • @FelixKling I am using Chrome and outputting to HTML (see comment in op) – littlewolf Sep 20 '16 at 19:05
  • 1
    @littlewolf: HTML ignores line breaks (treats them as spaces). https://jsfiddle.net/fcp1st3j/ – Felix Kling Sep 20 '16 at 19:06