Multi-line strings aren't a good part of JavaScript. While they are easy to declare in other languages (for instance, NOWDOC), you cannot just keep single-quoted or double-quoted strings in multiple lines. This will lead to syntax error as every line in JavaScript is considered as a possible command. You can set backslashes to show your intention:
var str = "Lorem ipsum dolor sit amet, \n\ consectetur adipiscing elit. Nunc ornare, \n\ diam ultricies vehicula aliquam, mauris \n\ ipsum dapibus dolor, quis fringilla leo ligula non neque";
This kind of works. However, as soon as you miss a trailing space, you get a syntax error, which is not easy to spot. While most script agents support this syntax, it's, however, not a part of the EcmaScript specification.
In the times of EcmaScript for XML (E4X), we could assign a pure XML to a string, which opened a way for declarations such as these:
var str = <>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare </>.toString();
Nowadays E4X is deprecated, it's not supported anymore.
We can also use string concatenation. It may feel clumsy, but it's safe:
var str = "Lorem ipsum dolor sit amet, \n" + "consectetur adipiscing elit. Nunc ornare,\n" + "diam ultricies vehicula aliquam, mauris \n" + "ipsum dapibus dolor, quis fringilla leo ligula non neque";
You may be surprised, but concatenation is slower than array joining. So the following technique will work faster:
var str = [ "Lorem ipsum dolor sit amet, \n", "consectetur adipiscing elit. Nunc ornare,\n", "diam ultricies vehicula aliquam, mauris \n", "ipsum dapibus dolor, quis fringilla leo ligula non neque"].join( "" );
What about ES6? The latest EcmaScript specification introduces a new sort of string literal, template literal:
var str = `Lorem ipsum dolor sit amet, \n consectetur adipiscing elit. Nunc ornare, \n diam ultricies vehicula aliquam, mauris \n ipsum dapibus dolor, quis fringilla leo ligula non neque`;
Now the syntax looks elegant. But there is more. Template literals really remind us of NOWDOC. You can refer any variable declared in the scope within the string:
"use strict";
var title = "Some title",
text = "Some text",
str = `<div class="message">
<h2>${title}</h2>
<article>${text}</article>
</div>`;
console.log( str );The output is as follows:
<div class="message"> <h2>Some title</h2> <article>Some text</article> </div>
If you wonder when can you safely use this syntax, I have a good news for you—this feature is already supported by (almost) all the major script agents (http://kangax.github.io/compat-table/es6/).
With the advance of ReactJS, Facebook's EcmaScript language extension named JSX (https://facebook.github.io/jsx/) is now really gaining momentum. Apparently influenced by previously mentioned E4X, they proposed a kind of string literal for XML-like content without any screening at all. This type supports template interpolation similar to ES6 templates:
"use strict";
var Hello = React.createClass({
render: function() {
return <div class="message">
<h2>{this.props.title}</h2>
<article>{this.props.text}</article>
</div>;
}
});
React.render(<Hello title="Some title" text="Some text" />, node);Another way to declare multiline strings is by using CommonJS Compiler (http://dsheiko.github.io/cjsc/). While resolving the 'require' dependencies, the compiler transforms any content that is not .js/.json content into a single-line string:
foo.txt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare, diam ultricies vehicula aliquam, mauris ipsum dapibus dolor, quis fringilla leo ligula non neque
consumer.js
var str = require( "./foo.txt" ); console.log( str );
You can find an example of JSX use in Chapter 6, A Large-Scale JavaScript Application Architecture.