Multi Line Strings: Difference between revisions

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. …')
 
(updating casing, info, pros / cons, etc)
Line 1: Line 1:
Sometimes it is desirable to define a multi line string in Javascript.
Sometimes, it is desirable to use a multi line string in JavaScript, such as when adding css styles. Here are some approaches, and discussion about the strengths and weaknesses of each approach.
Here's a number of possible aproaches, and discussion about the strengths and weaknesses of each approach.


== Concatenation ==
== Concatenation ==


The simplest method:
The basic method:


<pre class='sample'>
<pre class='sample'>
Line 19: Line 18:
Cons:
Cons:
* Extra syntax at the head and tail of every line.
* Extra syntax at the head and tail of every line.
* Javascript string concatenation has poor performance characteristics.
* 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:
A very similar but more efficient approach would define an array of many strings, then join them into one long string:
Line 35: Line 34:
== Line continuation ==
== Line continuation ==


Javascript can continue lines, via trailing backslashes, like C:
JavaScript can continue lines, via trailing backslashes, like C:


<pre class='sample'>
<pre class='sample'>
Line 49: Line 48:
* Efficient.
* Efficient.
Cons:
Cons:
* An uncommon technique, it is not as well understood.
* An uncommon technique, and is therefore not as well understood.
* Requires extra syntax, albeit not as much as with concatenation.


== E4X ==
== E4X ==


The [https://developer.mozilla.org/en/E4X E4X] technology allows embedding XML documents directly in Javascript.
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.
It can be used to pull out a (potentially long, multi-line) string from a dummy XML document.


Line 64: Line 64:
   Donec at cubilia pulvinar elit.
   Donec at cubilia pulvinar elit.
   Aliquet pretium tortor montes maecenas ante amet vel bibendum.
   Aliquet pretium tortor montes maecenas ante amet vel bibendum.
]]></str>.tostring();
]]></str>.toString();
</pre>
</pre>


Pros:
Pros:
* Newlines are preserved in the string.
* Does not require escape characters for quotes or for new lines; E4X is interpreted verbatim.
* Extra markup is required at neither the beginning nor the end of each line.
Cons:
Cons:
* Only somewhat efficient; no string-concatenation issues, but does involve creation and throwaway of an XML DOM.
* Not too efficient; involves the creation and throwaway of an XML DOM.
* Not available in all browsers. For example, Google Chrome does not support E4X.


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

Revision as of 10:14, 27 April 2010

Sometimes, it is desirable to use a multi line string in JavaScript, such as when adding css styles. Here are some approaches, and discussion about the strengths and weaknesses of each approach.

Concatenation

The basic method: 

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.";

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: 

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("");

Line continuation

JavaScript can continue lines, via trailing backslashes, like C: 

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.";

Pros:

  • Efficient.

Cons:

  • An uncommon technique, and is therefore not as well understood.
  • Requires extra syntax, albeit not as much as with concatenation.

E4X

The 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. 

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();

Pros:

  • Does not require escape characters for quotes or for new lines; E4X is interpreted verbatim.

Cons:

  • Not too efficient; involves the creation and throwaway of an XML DOM.
  • Not available in all browsers. For example, Google Chrome does not support E4X.
Retrieved from "https://wiki.greasespot.net/index.php?title=Multi_Line_Strings&oldid=5175"