js Howto Declare a String Over Multiple Lines

Share this article

Someone asked me the other day how to declare a string over multiple lines in jQuery. It’s actually plain JavaScript and can be done by simply adding the escape character backslash “” after each line. As you can see we simply add the backslash to the end of each line to tell the interpreter it’s part of the same long string.

var textFromChris = "me:  we lunchin?
 Sent at 11:34 AM on Friday
 me:  sure
 Sent at 11:58 AM on Friday
 chris:  T=12.30
 Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
timeRegex.compile(timeRegex);
console.dir(timeRegex.exec(textFromChris));
Common error message: SyntaxError: unterminated string literal Compatibility: Testing revealed that it works in all major browsers, including IE 6. Obviously there are other ways we could achieve the same result. We could simply split the string up like this then it doesn’t matter that they are declared on separate lines.
var textFromChris = "me:  we lunchin?" +
 "Sent at 11:34 AM on Friday" +
 "me:  sure" +
 "Sent at 11:58 AM on Friday" +
 "chris:  T=12.30" +
 "Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
timeRegex.compile(timeRegex);
console.dir(timeRegex.exec(textFromChris));

Frequently Asked Questions (FAQs) about Declaring Strings Across Multiple Lines in JavaScript

What is the significance of using backticks ( ) in JavaScript for multiline strings?

Backticks ( ) in JavaScript are used to define template literals, a new feature introduced in ES6. Template literals allow you to declare strings across multiple lines without using the traditional string concatenation methods. This makes your code cleaner and easier to read. For instance, you can declare a multiline string as follows:
let multilineString = `This is a
multiline
string`;
When you log this string to the console, it will maintain the line breaks, making it a useful feature for formatting text in JavaScript.

How can I include variables in a multiline string in JavaScript?

With the introduction of template literals in ES6, you can easily include variables in a multiline string using the ${} syntax. This is known as string interpolation. Here’s an example:
let name = 'John';
let multilineString = `Hello,
${name}`;
In this case, the variable name will be replaced by its value (‘John’) in the output string.

Can I use string concatenation to create multiline strings in JavaScript?

Yes, you can use the ‘+’ operator to concatenate strings and create multiline strings in JavaScript. However, this method can make your code look cluttered, especially for long strings. Here’s an example:
let multilineString = 'This is a ' +
'multiline ' +
'string';
Each string is on a new line, but you need to include a space at the end of each line to ensure proper spacing in the final string.

Are there any performance differences between using backticks and string concatenation for multiline strings?

In most cases, the performance difference between using backticks (template literals) and string concatenation is negligible. However, template literals can be faster and more efficient when working with large strings or when performing complex operations, such as string interpolation.

How can I add a new line character in a JavaScript string?

You can add a new line character in a JavaScript string using the escape sequence ‘\n’. This character causes a line break, and it can be used with both single quotes, double quotes, and backticks. For example:
let string = 'Hello, \nWorld!';
In this case, ‘World!’ will be printed on a new line.

Can I use template literals in all browsers?

Template literals are a part of ES6, and they are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, they are not supported in Internet Explorer. If you need to support IE, you should use string concatenation or the new line character ‘\n’ to create multiline strings.

How can I include expressions in a multiline string in JavaScript?

With template literals, you can include expressions directly in your strings using the ${} syntax. The expression will be evaluated, and its result will be inserted into the string. For example:
let x = 5;
let y = 10;
let multilineString = `The sum is:
${x + y}`;
In this case, ‘The sum is: 15’ will be printed.

Can I nest template literals in JavaScript?

Yes, you can nest template literals in JavaScript. This can be useful when you need to create complex strings. Here’s an example:
let name = 'John';
let age = 30;
let multilineString = `Hello,
${name}. You are ${age < 18 ? 'a minor' : 'an adult'}.`;
In this case, the ternary operator is used inside a template literal to create a dynamic string.

Can I use template literals with functions in JavaScript?

Yes, you can use template literals with functions in JavaScript. This is known as tagged template literals. A tagged template literal allows you to parse template literals with a function. The first argument of the function contains an array of string values, and the remaining arguments are related to the expressions.

How can I escape a backtick in a template literal?

You can escape a backtick in a template literal using the backslash (”) character. For example:
let multilineString = `This is a \`backtick\``;
In this case, ‘backtick‘ will be printed with backticks included.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuerySyntaxError: unterminated string literal
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week