Difference between revisions of "Multi Line Strings"

From GreaseSpot Wiki
Jump to navigationJump to search
Line 54: Line 54:
== Using <tt>@resource</tt> ==
== Using <tt>@resource</tt> ==


If the string is too long &mdash; i.e. CSS code, JSON data &mdash; 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.
If the string is too long or too big &mdash; i.e. CSS code, JSON data &mdash; 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
First, add <code>@resource</code> in metadata block

Revision as of 20:14, 1 January 2013

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, therefore not as well understood.
  • Requires extra syntax, albeit not as much as with concatenation.

Using @resource

If the string is too long or too big — i.e. CSS code, JSON data — you can use @resource metadata in your script and get its content using GM_getResourceText API.

First, add @resource in metadata block

// @resource resourceName http://www.example.com/example.ext

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:

  • TBA

Cons:

  • Requires file to be downloaded.
  • TBA