JavaScript: Escape sequences
Suppose we want to print the text below across two lines.
- Are you hungry?
- Aaaarrrgh!If we simply pass this text to console.log(), JavaScript will print everything on a single line. Technically, we could write two consecutive console.log() calls, but let's imagine we want to do it with a single one.
console.log('- Are you hungry?- Aaaarrrgh!');
// => - Are you hungry?- Aaaarrrgh!For each of them to start on a new line, we need to add a line break, that is, to "press Enter". In programming, this is done by adding special characters, in this case \n. Yes, this is not a typo. Even though we see two characters here, from JavaScript's point of view this is a single character.
console.log('- Are you hungry?\n- Aaaarrrgh!');The result will be as follows.
- Are you hungry?
- Aaaarrrgh!What is \n?
\n is an escape sequence (sometimes also called an "escaped sequence"). It denotes a line break but is not displayed directly. You won't see \n in the program's output, as it only affects the placement of the text.
In text editors, pressing Enter adds an invisible LF (Line Feed) character. That is exactly what \n stands for. Sometimes such characters can be seen if you enable the display of special characters.
- Hello!¶
- Oh, hi!¶
- How are you?Printers, editors, and JavaScript interpreters understand \n as a command to start the text on a new line.
Examples of using \n
Here is how JavaScript handles the escape sequence \n.
In code 'Hello\nWorld'
↓
On screen Hello
WorldThe position of \n changes the resulting output.
console.log('Hello\nWorld');
// Hello
// World
console.log('Hello \nWorld');
// Hello
// World (there is a space at the end of the first line)
console.log('Hello\n World');
// Hello
// World (there is a space at the beginning of the second line)
console.log('Hello\n\nWorld');
// Hello
//
// World (an empty line between them)Spaces before or after \n are also taken into account. JavaScript treats them as ordinary characters and displays them in the output.
You can also insert \n into any part of the string, before, after, or even use it on its own.
console.log('First line');
console.log('\n'); // just an empty line
console.log('Second line');The result will be as follows.
First line
Second lineHow to print the \n character itself
\n in JavaScript is an escape sequence. It controls the placement of the text and is not displayed on screen like ordinary characters. If you need to print exactly the characters \ and n, rather than a line break, you need to escape them. To do this, you add another slash before the backslash.
console.log('Hello\\nWorld');
// Hello\nWorld
// If you forget to add the second slash
console.log('Hello\nWorld');
// Hello
// WorldIn this case, JavaScript understands \\ as an ordinary backslash and shows the string without a line break.
Other escape sequences
In addition to \n, JavaScript has other escape sequences as well.
\tdenotes a tab (the equivalent of the Tab key).\rdenotes a carriage return (used on Windows, but rarely applied in modern code).- In programming,
\nis used most often; it is enough for the majority of tasks.
Important details
\nis a single character, even though in the code it is written as two (\andn).- On Windows, the combination
\r\nis used by default, but in JavaScript (and in cross-platform development in general) it is customary to use only\nto avoid problems when moving code between systems.
Instructions
You are writing a program that shows the user a hint about how to split text into lines. Print the hint with a single call to console.log():
Use "\n" to separate lines
Example: console.log("line1\nline2")Note: \n in the first line is literal text, not a line break.
Tips
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
Your exercise will be checked with these tests:
// @ts-check
import { expect, test, vi } from 'vitest';
test('escape characters', async () => {
const consoleLogSpy = vi.spyOn(console, 'log');
await import('./index.js');
const firstArg = consoleLogSpy.mock.calls.join('\n');
expect(firstArg).toBe(
'Use "\\n" to separate lines\nExample: console.log("line1\\nline2")',
);
});Teacher's solution will be available in:
20:00
