|
|
| 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.
| |
| | |
| == Using <tt>@resource</tt> ==
| |
| | |
| If the string is too long or too big — e.g. CSS code, JSON data — you can use [[Metadata Block#@resource|<tt>@resource</tt>]] metadata in your script and get its content using [[GM_getResourceText|<tt>GM_getResourceText</tt>]] API.
| |
| | |
| First, add <code>@resource</code> in metadata block
| |
| | |
| <nowiki>// @resource resourceName http://www.example.com/example.ext</nowiki>
| |
| | |
| You can then do something like
| |
| | |
| alert(GM_getResourceText("resourceName"));
| |
| | |
| GM_addStyle(GM_getResourceText("resourceName")); // if resource content is CSS
| |
| | |
| element.innerHTML = GM_getResourceText("resourceName"); // if resource content is HTML
| |
| | |
| var data = JSON.parse(GM_getResourceText("resourceName")); // if resource content is JSON
| |
| | |
| or whatever.
| |
| | |
| Pros:
| |
| * Editor syntax highlighting will work.
| |
| | |
| Cons:
| |
| * Requires file to be downloaded at install time.
| |
| * Low cross-platform compatibility.
| |
|
| |
|
| [[Category:Coding Tips:General]] | | [[Category:Coding Tips:General]] |
Modern browsers (including Firefox since version 34) support template literals which can span lines.
