|
|
| (6 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| Sometimes, it is desirable to use a multi line string in JavaScript, such as when adding css styles.
| | 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 are some approaches, and discussion about the strengths and weaknesses of each approach.
| |
| | |
| == Concatenation ==
| |
| | |
| The basic 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, therefore not as well understood.
| |
| * Requires extra syntax, albeit not as much as with concatenation.
| |
| | |
| == 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-bad'>
| |
| 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:
| |
| * 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.
| |
| Cons:
| |
| * E4X [https://developer.mozilla.org/en-US/docs/E4X is deprecated]. It will stop working in phases, Firefox 16 through 18.
| |
|
| |
|
| [[Category:Coding Tips:General]] | | [[Category:Coding Tips:General]] |
Modern browsers (including Firefox since version 34) support template literals which can span lines.
