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.
<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
2. The 1 liner example
<SPAN class="keyword token">var</SPAN> str <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Mary had a little lamb, little lamb, little lamb\nMary had a little lamb\nWhose fleece was white as snow.\n"</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
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
<SPAN class="keyword token">var</SPAN> list <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"Mary had a little lamb, little lamb, little lamb"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"Mary had a little lamb"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"Whose fleece was white as snow."</SPAN> <SPAN class="punctuation token">]</SPAN>
<SPAN class="keyword token">var</SPAN> str <SPAN class="operator token">=</SPAN> list<SPAN class="punctuation token">.</SPAN><SPAN class="token function">join</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"\n"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"\n"</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>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
<SPAN class="keyword token">var</SPAN> str <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>folder<SPAN class="punctuation token">.</SPAN><SPAN class="token function">readTextFile</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"rhyme.txt"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
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
<SPAN class="keyword token">var</SPAN> str <SPAN class="operator token">=</SPAN> <SPAN class="template-string token"><SPAN class="string token">`Mary had a little lamb, little lamb, little lamb
Mary had a little lamb
Whose fleece was white as snow.
`</SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
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:
<SPAN class="keyword token">var</SPAN> name <SPAN class="operator token">=</SPAN> <SPAN class="string token">'Mary'</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> str <SPAN class="operator token">=</SPAN> <SPAN class="template-string token"><SPAN class="string token">`</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>name<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> had a little lamb, little lamb, little lamb
</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>name<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> had a little lamb
Whose fleece was white as snow.
`</SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>Here's a more extended form which includes operators:
<SPAN class="keyword token">var</SPAN> customer <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Foo"</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">var</SPAN> card <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> amount<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN> product<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Bar"</SPAN><SPAN class="punctuation token">,</SPAN> unitprice<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">42</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">var</SPAN> str <SPAN class="operator token">=</SPAN> <SPAN class="template-string token"><SPAN class="string token">`Hello </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>customer<SPAN class="punctuation token">.</SPAN>name<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">,
want to buy </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>card<SPAN class="punctuation token">.</SPAN>amount<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>card<SPAN class="punctuation token">.</SPAN>product<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> for
a total of </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>card<SPAN class="punctuation token">.</SPAN>amount <SPAN class="operator token">*</SPAN> card<SPAN class="punctuation token">.</SPAN>unitprice<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> bucks?`</SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>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.
