ECMAScript 7: Multiline strings

StephenQuan1 · ‎04-24-2019

1. Mary had a little lamb

AppStudio 3.3 is based on Qt5.12.1 which includes a new JavaScript engine supporting ECMAScript 6 and ECMAScript 7. In this blog we will be looking at multiline string literals, specifically, different ways of realizing the following nursery rhyme:

Mary had a little lamb, little lamb, little lamb
Mary had a little lamb
Whose fleece was white as snow.
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

2. The 1 liner example

var str = "Mary had a little lamb, little lamb, little lamb\nMary had a little lamb\nWhose fleece was white as snow.\n"‍‍‍‍

The above code gives us what we want. A 3 line rhyme stored in a string. It's short, but, it is hard to read and maintain. The newline \n character makes reading the first word in the following sentence awkward.

3. String lists

var list = [ "Mary had a little lamb, little lamb, little lamb",
             "Mary had a little lamb",
             "Whose fleece was white as snow." ]
var str = list.join("\n") + "\n"‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Using a staging list means we don't need to remember to put \n to break every line. It's looks nicer in code and easier to maintain the rhyme since we can now split the code over multiple lines. It does suffer from the fact that we need to ensure the syntax of lists is correct (i.e. the commas needed to be correctly placed). It has the advantage that we can make use of array functions such as appending to the end of the list. The joining line does look awkward but it's always the same pattern so you'll get used to it. Because we are using join, we must remember to append the last \n.

4. Using the files

var str = app.folder.readTextFile("rhyme.txt")‍‍‍‍‍

By storing strings in files, we can dramatically reduce the code that appears in your program. This reduces error significantly, and, maintenance on your rhyme can be done in a regular text edit without worrying about the Javascript side of things.

5. ECMAScript 6 multiline string

var str = `Mary had a little lamb, little lamb, little lamb
Mary had a little lamb
Whose fleece was white as snow.
`‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As of AppStudio 3.3 (and Qt 5.12.x) we can now use backticks ` to surround a multiline string element. This is incredibly easy to read and maintain. Backticks also introduces a new feature called expression interpolation. Here's a simple example involving our poem:

var name = 'Mary';
var str = `${name} had a little lamb, little lamb, little lamb
${name} had a little lamb
Whose fleece was white as snow.
`‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Here's a more extended form which includes operators:

var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var str = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

References

Send us your feedback to appstudiofeedback@esri.com
Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial.
Follow us on Twitter @AppStudioArcGIS to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
The AppStudio team periodically hosts workshops and webinars; please click on this link to leave your email if you are interested in information regarding AppStudio events.