Storing multiline strings in Hype (without loading them)

Using JavaScript with Hype
1

Use the backslash character

There are a few different ways to get a multiline string into JS. One way is to use the backslash character at the end of each line:

var str = "This is a \
multiline string.";

Using the backslash character has the advantage of being able to break the string up into multiple lines without having to use quotation marks at the end of each line. However, it can be difficult to read the string if it is very long.

Use the concatenation operator

Another way is to use the concatenation operator:

var str = "This is a " +
"multiline string.";

The concatenation operator is a good middle ground, as it is supported in all browsers and is easy to read. However, you have to remember to put a plus sign at the end of each line.

Use template literals

You can also use template literals:

var str = `This is a
multiline string.`;

Using template literals is the most convenient way to create a multiline string, as you don't have to use any special characters and the string will be easy to read. However, template literals are only supported in modern browsers.

Use a function to get multiline strings

function getCommentsFromString(str) {
  str = str.toString();
  var start = str.indexOf("/*");
  var end = str.indexOf("*/");
  var result = [];
  while (start !== -1) {
    result.push(str.slice(start + 2, end));
    start = str.indexOf("/*", end + 2);
    end = str.indexOf("*/", end + 2);
  }
  return result;
}

If you want to support older browsers or want an easy way to read multiline strings, you can use a function like the one above. This function will take a string and return an array of all the comments in the string.

For example, the function can be used like this:

var str = "This is a /* multiline */ string.";
var comments = getCommentsFromString(str);
console.log(comments); // [" multiline "]

As this string parsing method allow treating another Hype function as a string and allows for line breaks, you could strip comments from another Hype function.

function myHypeFunction(hypeDocument, element, event){
/*

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. 

Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.
*/

/* hello */ 
}

Now you can strip the comments…

var str = hypeDocument.functions().myHypeFunction;
var comments = getCommentsFromString(str);
console.log(comments); // returns an array of all comment blocks in  myHypeFunction()

Got yet another method? Feel free to add it here…

2

I'm a big fan of the """ in Python, but in JavaScript, I personally use the += operator, like:

var str = "hello,";
str += "world";

However it is pretty rare in JS to have such long block strings in code, for whatever reason. So this style just comes from using it in more logic-oriented approaches:

if(leftValue != null) {
	transformString += " translateX(" + transformValuePixel(leftValue, 2) + ") ";
}
if(topValue != null) {
	transformString += " translateY(" + transformValuePixel(topValue, 2) + ") ";
}
2 Likes