|
|
| (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]] |
Modern browsers (including Firefox since version 34) support template literals which can span lines.
