Difference between revisions of "Multi Line Strings"

From GreaseSpot Wiki
Jump to navigationJump to search
(Created page with 'Sometimes it is desirable to define a multi line string in Javascript. Here's a number of possible aproaches, and discussion about the strengths and weaknesses of each approach. …')
 
(Replaced content with "Modern browsers (including Firefox since version 34) support [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals template literals] which...")
 
(9 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Sometimes it is desirable to define a multi line string in Javascript.
Modern browsers (including Firefox since version 34) support [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals template literals] which can span lines.
Here's a number of possible aproaches, and discussion about the strengths and weaknesses of each approach.
 
== Concatenation ==
 
The simplest method:
 
<pre class='sample'>
var longString = "Lorem ipsum dolor sit amet, " +
  "venenatis penatibus etiam. " +
  "Nec purus cras elit nec. " +
  "Elit pharetra hymenaeos. " +
  "Donec at cubilia pulvinar elit. " +
  "Aliquet pretium tortor montes maecenas ante amet vel bibendum.";
</pre>
 
Pros:
* Simple to understand.
Cons:
* Extra syntax at the head and tail of every line.
* Javascript string concatenation has poor performance characteristics.
 
A very similar but more efficient approach would define an array of many strings, then join them into one long string:
 
<pre class='sample'>
var longString = ["Lorem ipsum dolor sit amet, ",
  "venenatis penatibus etiam. ",
  "Nec purus cras elit nec. ",
  "Elit pharetra hymenaeos. ",
  "Donec at cubilia pulvinar elit. ",
  "Aliquet pretium tortor montes maecenas ante amet vel bibendum."
  ].join("");
</pre>
 
== Line continuation ==
 
Javascript can continue lines, via trailing backslashes, like C:
 
<pre class='sample'>
var longString = "Lorem ipsum dolor sit amet, \
  venenatis penatibus etiam. \
  Nec purus cras elit nec. \
  Elit pharetra hymenaeos. \
  Donec at cubilia pulvinar elit. \
  Aliquet pretium tortor montes maecenas ante amet vel bibendum.";
</pre>
 
Pros:
* Efficient.
Cons:
* An uncommon technique, it is not as well understood.
 
== E4X ==
 
The [https://developer.mozilla.org/en/E4X E4X] technology allows embedding XML documents directly in Javascript.
It can be used to pull out a (potentially long, multi-line) string from a dummy XML document.
 
<pre class='sample'>
var longString = <str><![CDATA[
  Lorem ipsum dolor sit amet,
  venenatis penatibus etiam.
  Nec purus cras elit nec.
  Elit pharetra hymenaeos.
  Donec at cubilia pulvinar elit.
  Aliquet pretium tortor montes maecenas ante amet vel bibendum.
]]></str>.tostring();
</pre>
 
Pros:
* Newlines are preserved in the string.
* Extra markup is required at neither the beginning nor the end of each line.
Cons:
* Only somewhat efficient; no string-concatenation issues, but does involve creation and throwaway of an XML DOM.


[[Category:Coding Tips:General]]
[[Category:Coding Tips:General]]

Latest revision as of 14:58, 3 November 2017

Modern browsers (including Firefox since version 34) support template literals which can span lines.