Line Continuation Characters in JavaScript

1. Lexical Grammar in JavaScript
2. String Literals in JavaScript
3. Line Continuation in JavaScript
4. Implement Line Continuation Using an Escape Method in JavaScript
5. Implement Line Continuation Using Template Literals in JavaScript
6. Implement Line Continuation Using HTML Break Element in JavaScript

The lexical grammar in JavaScript is covered in this brief JavaScript tutorial. Also, strings will be covered in depth using various new line techniques and how to handle line breaks when dealing with these strings.

Lexical Grammar in JavaScript

In computer science, lexical grammar is a technical grammar that describes the syntax of tokens. The program is constructed with characters defined by the language’s linguistic structure.

The character set is comparable to any written language’s alphabet. ECMAScript scripts’ source text is read from left to right and turned into a series of input components such as tokens, control characters, line terminators, comments, or white space.

ECMAScript defines specific keywords, literals, and rules for inserting semicolons after statements.

String Literals in JavaScript

A string literal is an order of zero or more Unicode code points surrounded by single or double quotations. An escape sequence can also represent Unicode code points.

Except for the following closing quotation code points, all code points may occur verbatim in a string literal:

1. U+005C or \ (backslash),
2. U+000D or <CR>,
3. and U+000A or <LF>.

Any code points can appear as an escape sequence.

String literals are interpreted as ECMAScript string values. Unicode code points are UTF-16 encoded when these string values are generated.

Line Continuation in JavaScript

String manipulation in JavaScript may be complex. Although string manipulation is simple to master, it is challenging to implement, and one related area is adding new lines.

There are other ways to insert new lines with JavaScript, but they are not as straightforward as HTML’s paragraph or break tag.

Nonetheless, let’s look at the most popular ways to insert a new line in JavaScript.

Implement Line Continuation Using an Escape Method in JavaScript

In JavaScript, escape sequences are a systematic way to create a new line. In Windows and Linux, the escape sequence for a new line is \n; however, on a few older Macs, \r is used.

The implementation of escape sequences is relatively simple.

Example:

let data = 'Hello World';

let newstring = 'Hello \nWorld';

console.log(data);

console.log(newstring);

Output:

"Hello World"
"Hello
World"

You can also see the result of the above code segment using this link.

Hexadecimal Escape Sequences

Hexadecimal escape sequences consist of the character \x followed by exactly two hexadecimal numbers denoting a code unit or point ranging from 0x0000 to 0x00FF.

Example:

'\xA9'  // "©"

Unicode Escape Sequences

Following \u, a Unicode escape sequence consists of precisely four hexadecimal digits. In the UTF-16 encoding, it denotes a code unit.

The code unit is equivalent to the code points U+0000 to U+FFFF. Code points necessitate two escape sequences that reflect the two code units used to encode the character; the surrogate pair is unique from the code point.

Example:

'\u00A9'  // "©" (U+A9)

Unicode Code Point Escape Sequences

A Unicode code point escape sequence consists of \u{} with a hexadecimal code point. The hexadecimal digits must range from 0 to 0x10FFFF.

Surrogate pairs are not required for code points in U+10000 to U+10FFFF. In ECMAScript 2015, code point escapes were added to JavaScript (ES6).

Example:

'\u{2F804}'  // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)

// the same figure portrayed as a surrogate twin

'\uD87E\uDC04'

Implement Line Continuation Using Template Literals in JavaScript

Template literals may seem complicated, but they are string literals supporting embedded expressions behind the jargon. They facilitate the usage of multi-line strings.

Backticks (``) are used to surround template literals.

Example:

let data = 'Hello \nWorld';

let newstring = `Hello

World`;

console.log(data);

console.log(newstring);

Output:

"Hello
World"
"Hello
World"

You can also see the result of the above code segment using this link.

The same output is returned in both situations of the escape method and template literals. However, as you can see, template literals make writing multi-line strings easier.

Implement Line Continuation Using HTML Break Element in JavaScript

Another way to create a new line in JavaScript is to include the HTML line break elements in your string.

It is important to note that break elements should only be used when the division of a line is significant. However, because this strategy is hugely prevalent, we will also look at it.

Example:

<html>

<body>

<p id="newline"></p>

<script>

let data = "Hello" + "<br>" + "World ";

document.getElementById("newline").innerHTML = data;

</script>

</body>

</html>

Output:

You can also see the result of the above code segment using this link.