What is the difference between normal strings and template literals when it comes to line breaks and extra white space?

/ / Published in Web Development, EITC/WD/JSF JavaScript Fundamentals, Basic programming in JavaScript, More on strings, Examination review

Template literals, also known as template strings, are a feature introduced in ECMAScript 2015 (ES6) that offer a more flexible and expressive way to work with strings in JavaScript compared to normal strings. One of the key differences between template literals and normal strings is how they handle line breaks and extra white space.

In normal strings, line breaks and extra white space are treated literally. This means that if you want to include a line break or add extra white space in a normal string, you need to use escape characters such as "n" for line breaks and "t" for tabs. For example:

javascript
const normalString = "This is annormal string.";
console.log(normalString);
// Output: This is a
// normal string.

const extraWhiteSpace = "This  tis   a   normal   string.";
console.log(extraWhiteSpace);
// Output: This    is   a   normal   string.

As you can see, the line break and extra white space are preserved exactly as they are in the normal string.

On the other hand, template literals provide a more convenient way to handle line breaks and extra white space. With template literals, you can include line breaks and extra white space directly within the string without the need for escape characters. This is achieved by using backticks (`) instead of single or double quotes. For example:

javascript
const templateLiteral = `This is a
template literal.`;
console.log(templateLiteral);
// Output: This is a
// template literal.

const extraWhiteSpace = `This     is    a    template    literal.`;
console.log(extraWhiteSpace);
// Output: This     is    a    template    literal.

In template literals, line breaks and extra white space are preserved exactly as they are written within the backticks. This makes it easier to write and read multiline strings with proper indentation.

Template literals also offer an additional feature called "interpolation" that allows you to embed expressions within the string using placeholders. These placeholders are denoted by the dollar sign followed by curly braces (${expression}). The expression within the curly braces is evaluated and its value is inserted into the string. This can be very useful for dynamically generating strings. For example:

javascript
const name = "John";
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Output: Hello, my name is John and I am 25 years old.

In the above example, the values of the variables `name` and `age` are interpolated into the template literal using the `${}` syntax.

Template literals provide a more convenient and expressive way to work with strings in JavaScript compared to normal strings. They allow for easier handling of line breaks and extra white space, and also offer the ability to interpolate expressions within the string.

Other recent questions and answers regarding Examination review:

More questions and answers:

Tagged under: , , , ,